2

モデルの各エントリでテーブルが更新され、配列の削除と追加時に2つのイベントが発生しました。hiddenElementはjqueryの「fadeOut」を呼び出し、showElementはjqueryの「fadeIn」関数を呼び出して、気の利いたフェードアウト/フェードイン効果を作成します。

<tbody  data-bind='template: { foreach: entries,
     beforeRemove: hideElement,
     afterAdd: showElement }'>

私のモデルは次のようなものです。

var Model = function() {
self.entries = ko.mapping.fromJS([]);
this.getData = function() {
$.ajax({
    url: "/test",
    type: "GET",
    success: function(response) {
        ko.mapping.fromJS(response, self.entries);
...

this.showElement = function(elem) { 
    if(elem.nodeName == "TR") {
         $(elem).fadeIn(500);
    }
};

this.hideElement = function(elem) { 
    if(elem.nodeName == "TR") {
       $(elem).fadeOut(500);
    };
};
...

問題は、ajax応答でが呼び出されるたびに、ko.mapping.fromJS(response, self.entries)まったく同じであっても、ノックアウトがエントリを削除/追加しているように見えることです。そのため、showElement / hiddenElementが呼び出され、テーブル内の要素はajax呼び出しごとに削除/追加されるため、「点滅」しています。

こんな感じなのか、間違って使っているのか？

4

1 に答える 1

2

プラグインが同じアイテムを認識できるように、マッピングプラグインのキーオプションを使用する必要があります

http://jsfiddle.net/yWwfz/

var mapping =  {
    items: {
        key: function(item) { return item.id; }
    }
};
ko.mapping.fromJS(data, mapping, this);
于 2013-01-20T12:17:42.163 に答える