1

アイテムを追加および削除できる Knockout observableArray が与えられた場合、対応する HTML 要素を Isotope でレイアウトするにはどうすればよいですか? たとえば、#containerKnockout によって子 div を設定する必要がある div を宣言する次の HTML を考えてみましょう。

<div id="container" data-bind="foreach: items, click: addItem">
<div class="item show" data-bind="text: text, click: $parent.removeItem, clickBubble: false"></div>

付属の JavaScript は、コンテナーにいくつかのアイテムを事前に入力し、ユーザーがアイテムをクリックしてそれらを削除し、コンテナーをクリックして新しいアイテムを追加できるようにします (Knockout 経由)。

function ItemModel(parent) {
    var value, self = this,
        found;
    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);
        return false;
    };

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

ko.applyBindings(new ViewModel("Test"));

Isotope と適切に結合すると、アイテムが削除、追加、移動された場合を含め、アイテムは Isotope によって自動的に配置されます。

コンセプトのデモについては、このフィドルを参照してください。

4

2 に答える 2

0

これは解決策かもしれません...または開始する方法

 <div id="Items" data-bind=" foreach: Items">

    <div class="item" data-bind="masonry: { container: '#Items'  }"> 
    </div>  
 </div>

ko.bindingHandlers.masonry = { init: 関数 (要素、valueAccessor、allBindingsAccessor、viewModel、bindingContext) {

},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

    var $el = $(element);
    var value = ko.utils.unwrapObservable(valueAccessor());


    var container = document.querySelector(value.container);
    var msnry = Masonry.data(container);


    if (!msnry) {
        var msnry = new Masonry(container);
    }
    msnry.addItems($el)
    msnry.layout();
    msnry.bindResize();
},

};

于 2013-10-31T19:01:57.270 に答える
0

Knockout-Isotopeと呼ばれる特別な Knockout バインディングを作成することで、Knockout を Isotope と統合することができました。これにより、2 つのテクノロジの統合が大幅に促進され、Isotope が Knockout ビュー モデルと確実に同期されます。Knockout observableArrayでこのバインディングを使用する方法の例については、以下のコードを参照するか、ライブfiddleを試してください。

ただし、このバインディングは機能するためにKnockoutのフォークに依存することに注意してください。

コード

デモフィドル。

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-12T16:34:15.013 に答える