kendo mvvm模板內綁定

我正在嘗試kendo mvvm模板內綁定。模板變量正在工作，但沒有MVVM的東西。kendo mvvm模板內綁定

<div id="list"></div> 

<script id="template" type="text/x-kendo-template"> 
    <div> 
    <button data-bind="visible: alreadyAttending, click: onClick"> 
     Your id is ${ID} 
    </button> 
    </div> 
</script> 

var data = []; 
data[0] = { alreadyAttending: true, ID: 1, onClick: function() { alert("Click 1"); }}; 
data[1] = { alreadyAttending: false, ID: 2, onClick: function() { alert("Click 2"); }}; 

$("#list").kendoListView({ 
    dataSource: data, 
    template: kendo.template($("#template").html()) 
});

小提琴可在這裏：https://jsfiddle.net/q99ufo3c/5/

你可以看到按鈕從數據數組的值，但知名度替換，然後單擊事件不接線。我不確定我錯過了什麼。有誰知道這是否被支持？

來源

2017-09-26 user2719430

你混合MVVM與jQuery的語法。您需要一個模型（kendo observable）並將一個容器div綁定到該模型。您還需要在列表div中指定模板 –

您需要爲div元素定義一些數據屬性，以便Kendo可以將其正確綁定到您的View Model。

data-role="listview" - 定義了一個listview組件;
data-template="yourtemplateid" - 定義要使用的模板;
data-bind="source: dataSource" - 定義數據是什麼
listview組件的來源;

在Javascript中，您需要有一個模型來表示您的對象將在列表視圖的數據源中。我創建了一個名爲vm的文件，並且我選擇使用ObservableObject擴展方法，因爲如果要使用默認值創建對象（如onClick方法），它非常有用。

請看下面的代碼片段。

(function() { 
 
    var vm = kendo.data.ObservableObject.extend({ 
 
    init: function(values) { 
 
     var defaultValues = { 
 
     alreadyAttending: false, 
 
     ID: null 
 
     }; 
 
     kendo.data.ObservableObject.fn.init.call(this, $.extend({}, defaultValues, values)); 
 
    }, 
 
    onClick: function() { 
 
     alert(this.get("ID")); 
 
    } 
 
    }); 
 

 
    var source = [ 
 
    new vm({ 
 
     alreadyAttending: true, 
 
     ID: 1 
 
    }), 
 
    new vm({ 
 
     alreadyAttending: false, 
 
     ID: 2 
 
    }) 
 
    ]; 
 

 
    var mainViewModel = kendo.observable({ 
 
    dataSource: source 
 
    }); 
 

 
    kendo.bind($("#list"), mainViewModel); 
 
})();

<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="list" data-role="listview" data-template="template" data-bind="source: dataSource"></div> 
 
    <script id="template" type="text/x-kendo-template"> 
 
    <div> 
 
     <button data-bind="visible: alreadyAttending, click: onClick"> 
 
     \t Your id is #:ID# 
 
     \t </button> 
 
    </div> 
 
    </script> 
 
</body> 
 

 
</html>

來源

2017-09-27 23:53:29

kendo mvvm模板內綁定

回答

相關問題