1

RPNiemeyer の kendo-knockout ライブラリを使用しています。剣道テンプレートを含む剣道グリッドがあります。テンプレートには、viewModel を変更するメソッドを呼び出すノックアウト クリック バインディングを使用するボタンがあります。再現する手順：

  1. グリッドのボタンをクリックします。
  2. viewModel のプロパティを変更し、新しい値を通知するメソッドが呼び出されます。
  3. ボタンをもう一度クリックします。ボタンが機能しなくなりました。

注: ビューモデルのプロパティを変更する行を削除すると、すべて正常に動作します。

これが機能しない理由を説明してください。アイデアや解決策があれば大歓迎です。ありがとう！

html:

<div id="grid"  data-bind="kendoGrid: { data: fruits, columns: [ 
            {
                field: 'name',
                title: 'Fruit',
                width: 50
            },
            {
                template: '<button class=\'k-button\' data-bind=\'click: function() { changeFruit() }\' >Change Fruit Name</button>',
                width: 30
            }               

         ], 
        scrollable: false, sortable: true, pageable: false }" style="height: 380px">
    </div>

JavaScript:

var ViewModel = function() {
    this.fruit1 = {
        color: ko.observable("green"),
        name: ko.observable("apple"),
    };

    this.fruit2 = {
        color: ko.observable("orange"),
        name: ko.observable("orange"),
    };


    this.fruits = ko.observableArray([
        this.fruit1, 
        this.fruit2
    ]);

    this.changeFruit = function() {
        // this line breaks the binding, 
        // when You change the property of the viewModel
        // You cannot call this function any more
        this.fruits()[0].name("Test");
        alert(this.fruits()[0].name());
    }
};

ko.applyBindings(new ViewModel());​

http://jsfiddle.net/hXn7e/25/

4

1 に答える 1

4

現時点では、グリッド内でのノックアウトテンプレートの使用は完全にはサポートされていません。Knockoutが最初にドキュメントを渡してバインディングを適用するときに要素が存在するため、現在、行はバインドされています。

データが更新された後、行が再レンダリングされ、バインディングが失われます。

1つの修正は、テーブルを再バインドする「dataBound」イベントにイベントハンドラーを使用することです。これは、次のようにグローバルに実行できます。

ko.bindingHandlers.kendoGrid.options.dataBound = function(data) {
    var body = this.element.find("tbody")[0];

    if (body) {
       ko.applyBindings(ko.dataFor(body), body);   
    }
};

サンプルは次のとおりです：http：//jsfiddle.net/rniemeyer/5Zkyg/

また、Knockoutが最初のパスでテーブルをバインドしないようにするカスタムバインディングを追加しました。これにより、テーブルが2回バインドされなくなります（applyBindings全体で1回、dataBoundハンドラーから1回）。

究極的には、これは私がノックアウト剣道でより良くサポートしたいものであり、私が図書館で取り組むことを計画している次のことです。

これは、私がしばらく前に始めたブランチからどのように機能するかのサンプルです：http: //jsfiddle.net/rniemeyer/xBL2B/

于 2012-12-13T15:34:49.590 に答える