Question

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

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

每次用户移动滑块手柄时，都应使用renderApples(appleCount)等方法使用适当数量的苹果重绘部分UI。

我应该使用model.currentAppleCount.subscribe（renderApples）还是有更好的方法，因为这种情况很简单，而且knockoutjs文档说明“你通常不需要手动设置订阅”。此外，作为一种良好实践，renderApples方法应该接收appleCount作为参数或直接访问model.currentAppleCount可观察的。

修改

问题是我需要使用添加和删除方法来处理第三方API。

Answer 1

使用ko.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/

Answer 2

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

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

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

你是对的，文件说：

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

这意味着你不再是初学者了。：）

P.S。如果您的第三方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之间进行双向绑定。

observable.subscribe或自定义绑定或

2 个答案: