Question

我正在使用带绑定和计数器来一次显示一个数组中的项目，例如<div data-bind="with: items[NavigatorCounter()]">计数器就像分页一样使用。当增加（或减少）计数器时，有一个滑动效果会很好，就像解释here一样。在那个例子中，他们这样做：{ foreach: planetsToShow, beforeRemove: hidePlanetElement, afterAdd: showPlanetElement }能够像这样写出来是很好的：{ with: items, beforeRemove: onRemove, afterAdd: onAdd }。有关如何实现这一目标的任何建议吗？

Answer 1

尝试使用订阅的第二个可观察数组...每当导航计数器使用订阅进行更改时，写入第二个可观察数组。

这是一个小提琴： http://jsfiddle.net/brettwgreen/eq9e67uu/1/

查看：

<div data-bind="template: { foreach: currentItems,
                            beforeRemove: hideElement,
                            afterAdd: showElement }">
<div data-bind="text: name"></div>
</div>
<br />
<button data-bind="click: goNext">Next</button>

视图模型：

var vm = function (){
    var self = this;
    self.items = ko.observableArray([ {name: "Item 1"}, {name: "Item 2"}, {name: "Item 3"}]);
    self.currentItems = ko.observableArray([]);
    self.NavigatorCounter = ko.observable(0);
    self.goNext = function() {
        if (self.NavigatorCounter() === self.items().length-1) {
            self.NavigatorCounter(0);
        }
        else {
            self.NavigatorCounter(self.NavigatorCounter()+1);
        }
    };
    self.NavigatorCounter.subscribe(function() {
        self.currentItems.removeAll();
        self.currentItems.push(self.items()[self.NavigatorCounter()]);
    });
    self.showElement = function(elem) { if (elem.nodeType === 1) $(elem).hide().slideDown() }
    self.hideElement = function(elem) { if (elem.nodeType === 1) $(elem).slideUp(function() { $(elem).remove(); }) }
    }
    ko.applyBindings(new vm());

在使用with-binding时，beforeRemove等

1 个答案: