テンプレート内の剣道mvvm結合

テンプレート内でmendy mvvm bindをしようとしています。テンプレート変数は動作していますが、MVVMのものはありません。テンプレート内の剣道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

あなたはjQueryの構文でMVVM混合しています。モデル（剣道観測可能）が必要で、コンテナdivをそのモデルにバインドします。リストdivにテンプレートを指定する必要もあります –

div要素にいくつかのデータ属性を定義する必要があります。これにより、剣道がView Modelに正しくバインドできるようになります。

data-role="listview" - listviewコンポーネントを定義します。
data-template="yourtemplateid" - 使用するテンプレートを定義します。
data-bind="source: dataSource" - データが何であるかを定義します。
listviewコンポーネントのソース。

Javascriptでは、リストビューのデータソースにあるオブジェクトを表すモデルが必要です。私はvmと呼ばれるものを作成しましたが、メソッドなどのデフォルト値を持つオブジェクトを作成する場合に便利なので、ObservableObject拡張メソッドを使用することを選択しました。

下記のスニペットをご覧ください。

(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

テンプレート内の剣道mvvm結合

答えて

関連する問題