4

IsotopejsとKnockoutjsを連携させようとしています。これまでのところ、DOMに要素を追加してから削除する必要がある場合を除いて、これは順調に機能しています。

このメソッドの内部まで問題を追跡しました：ko.utils.setDomNodeChildrenFromArrayMapping = function（domNode、array、mapping、options、callbackAfterAddingNodes）{..}

このメソッドを呼び出しているのはfixUpVirtualElements（lastMappingResult [lastMappingResultIndex] .domNodes）;

fixUpVirtualElementsメソッドは、beforeRemoveイベントでアイソトープを使用して削除する必要があるdomノードを削除しています。foreachバインディング呼び出しは、削除する必要のある要素を取得していません。

私はノックアウトでその方法のメモを読みました。しかし、私はそれが何について話しているのかについてのドメイン知識を持っていないので、それらが何を意味するのか理解していません。

誰かが私の最新のjsfiddleを見て、fixUpVirutalElementsがbeforeRemoveイベントに渡す必要のある要素を削除する理由を教えてください。

http://jsfiddle.net/evanlarsen/C5y6G/

誰かがこのjsFiddleを修正して、2つのライブラリを連携させることができますか？

ありがとう、エヴァン・ラーセン

4

2 に答える 2

5

私は同位体の専門家ではありません。私はそれが何をするのかを知っていますが、そのアルゴリズムについては知りませんが、knockout.jsのソースについては深い知識があります。ここでおそらく問題は、同位体がノックアウトテンプレートバインディングによって作成されたdomノードを操作することです。knockout.jsは、他のプログラムがテンプレートによって作成されたDOMノードに触れることを許可しません。すべてのknockout.jsアルゴリズムは、テンプレートによって作成されたdomノードが変更される唯一の方法は、テンプレートにバインドされた配列を操作することであると想定しています。ノードの追加、ノードの削除、または（アイソトープの場合のように）ノードの並べ替えによって、他の何かがそのノードを直接操作する場合、すべてのノックアウトjsアルゴリズムが狂ってしまいます...これは、削除されたノードが消えないことを意味し、一部のノードが複製されます...等々。

- - - - - - - - - - - - アップデート - - - - - - - -

解決済み：代わりに：

self.serviceAdded = function(el) {
        if (el && el.nodeType === 1) {
           $('#container').isotope('insert', $(el)); 

        }
    };

と：

self.serviceAdded = function(el) {
        if (el && el.nodeType === 1) {
           $('#container').isotope('appended', $(el)); 

        }
    };
于 2012-07-17T08:00:00.490 に答える
1

IsotopeとKnockoutを組み合わせるための最良のオプションは、後者のバインディングを使用することだと思います。そのために、Knockout-Isotopeという名前を作成しました。Knockoutのフォークバージョンが必要ですが、うまくいけば、私が行った小さな変更をいつか統合できるようになります。

Knockout-Isotopeを終了したばかりなので、十分にテストされていませんが、少なくともこれまでに投げたシナリオを処理します。

コード

デモフィドル。

HTML：

<h1>Knockout Isotope Binding Demo</h1>
<p>This is a demonstration of the 
 <a href="https://github.com/aknuds1/knockout-isotope">Knockout-Isotope</a>
 binding for <a href="http://knockoutjs.com/">Knockout</a>, which visualizes
 Knockout observableArrays through
 <a href="http://isotope.metafizzy.co/index.html">Isotope</a>.
</p>

<p>Click on an item to remove it or click in the item container to add a new item</p>
<div id="container" data-bind="isotope: { data: items, isotopeOptions: getOptions }, click: addItem">
  <div data-bind="text: text, click: $parent.removeItem, clickBubble: false"></div>
</div>

JavaScript：

function ItemModel(parent) {
    var value, self = this,
        found, i;
    for (value = 0; value < parent.items().length; ++value) {
        found = false;
        for (i in parent.items()) {
            var item = parent.items()[i];
            if (item.value() == value) {
                found = true;
                break;
            }
        }
        if (!found) {
            break;
        }
    }
    this.value = ko.observable(value);

    this.text = ko.computed(function () {
        return "Item " + self.value();
    });
}

var ViewModel = function () {
    var self = this;
    self.items = ko.observableArray();
    self.items.push(new ItemModel(self));
    self.items.push(new ItemModel(self));

    this.removeItem = function (item) {
        self.items.remove(item);
    };

    this.addItem = function () {
        self.items.push(new ItemModel(self));
    };

    // Knockout callback for getting Isotope options
    this.getOptions = function () {
        return {
            masonry: {
                columnWidth: 210
            }
        };
    };
};

ko.applyBindings(new ViewModel("Test"));
于 2013-02-17T13:50:32.273 に答える