2

我有一个带有 knockout.js 的简单培训案例，我想根据范围滑块值显示不同数量的苹果。这是滑块：

<input data-bind="value: currentAppleCount" type="range" step="1" min="2" max="10"/>

每次用户移动滑块手柄时，都应该使用一些方法（如renderApples(appleCount).

我应该使用 model.currentAppleCount.subscribe(renderApples) 还是有更好的方法，因为这种情况很简单，并且 knockoutjs 文档指出“您通常不需要手动设置订阅”。此外，作为一种良好做法，方法应该作为参数renderApples接收或直接访问 observable。appleCountmodel.currentAppleCount

编辑：

问题是我需要使用带有添加和删除方法的第三方 api。

4

2 回答 2

2

使用 ako.computed返回适当长度的数组。每次更新引用的 observable 时，都会重新评估计算的属性。

function ViewModel() {
    this.currentAppleCount = ko.observable(2);
    this.apples = ko.computed(function () {
        var currentAppleCount = this.currentAppleCount();
        var apples = [];
        for (var i = 1; i <= currentAppleCount; i++) {
            apples.push(i);
        }
        return apples;
    }, this);
}

ko.applyBindings(new ViewModel());

或者，您可以返回一个完整数组的切片。这样您就可以保留对象实例。

<input data-bind="value: currentAppleCount" type="range" step="1" min="2" max="10"/>
<ul data-bind="foreach: apples">
    <li>Apple #<span data-bind="text: $data"></span></li>
</ul>

http://jsfiddle.net/MizardX/KeHKB/

于 2012-12-09T18:53:19.510 回答
1

如果您正在使用第三方 API，例如 jQueryUI 小部件或类似的东西，那么设置订阅似乎是正确的做法。

我猜你的第三方 API 不理解淘汰赛，因此不知道如何处理 observables。设置订阅允许您拥有自己的代码，该代码将从 observable 获取更新的值并将其传递给 API。

model.currentAppleCount.subscribe(function(newValue) {
  someOtherAPI.UpdateAppleCount(newValue);
});

你是对的，文档说：

您通常不需要手动设置订阅，因此初学者应跳过此部分

这意味着您不再是初学者。:)

PS 如果您的第三方 API 能够更新 appleCount 的值，请务必挂钩到他们提供的某种类型的更新事件，然后从那里设置 observable。就像是：

// I'm just making up the OnAppleCountUpdate event.  I have 
// no idea what it might be called in the third party API.
someOtherAPI.OnAppleCountUpdate(function(newValueFromAPI) {
    model.currentAppleCount(newValueFromAPI);
});

这将允许您在 HTML/KO 片段和第三方 API 之间进行双向绑定。

于 2012-12-10T13:25:46.720 回答