1

给定一个 Knockout observableArray，可以添加和删除哪些项目，我如何使用 Isotope 布置相应的 HTML 元素？例如，考虑以下 HTML，它声明了一个 div ，该 div#container应该由 Knockout 填充子 div：

<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 应自动布置项目，包括何时删除、添加和移动项目。

有关该概念的演示，请参见this fiddle。

4

2 回答 2

0

通过编写一个名为Knockout-Isotope的特殊 Knockout 绑定，我已经能够将 Knockout 与 Isotope 集成。这极大地促进了两种技术的集成，并确保 Isotope 与 Knockout 视图模型保持同步。有关如何将此绑定与 Knockout observableArray一起使用的示例，请参见下面的代码，或尝试使用 live 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 回答
0

这可能是一个解决方案......或一种开始的方式

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

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

ko.bindingHandlers.masonry = { init: function (element, 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 回答