javascript - KnockoutJS foreach 列表 - 在项目更改时发布到服务器，最佳实践

Question

我正在使用 Knockout 的 foreach 绑定(bind)来生成带有数量输入字段的库存项目列表。当用户更改数量时，我想将新值发布到服务器。

我已经提出了一个解决方案，但我对有关我是否使用最佳 knockout 实践的反馈感兴趣。

我正在使用两个 View 模型。其中一个代表库存，并且只是单个库存行项目的可观察数组:

var inventory = function(lineItems) {
    var self = this;
    self.items = ko.observableArray(lineItems);
};

第二个代表库存订单项:

var lineItem = function(id, text, quantity, quantityChangedCallback) {
    var self = this;
    self.id = ko.observable(id);
    self.itemName = ko.observable(text);
    self.quantity = ko.observable(quantity);

    self.quantity.subscribe(function() {
        quantityChangedCallback(self);
    });
};

HTML 是:

<ul data-bind="foreach: items">
    <li>
        <span data-bind="text: itemName"></span>:&nbsp;
        <input class="invLineItem" data-bind="value: quantity"/>
    </li>
</ul>

我的 javascript 的其余部分:

var lineItemArray = [
    new lineItem(1, 'Item 01', 0, onQuantityChanged),
    new lineItem(2, 'Item 02', 0, onQuantityChanged),
    new lineItem(3, 'Item 03', 2, onQuantityChanged)
    ];

ko.applyBindings(new inventory(lineItemArray));

function onQuantityChanged(item) {
    alert("Post change to server: " + ko.toJSON(item));
} 

我的问题是，

1) 我使用订阅是否是在数量发生变化时收到通知的良好做法？它似乎工作得很好，只有当相应的数量输入元素的焦点丢失并且其值发生变化时才会被调用。这正是我想要的。

2)回调方法怎么样？这是感觉不太正确的部分，但这是我能想到的从项目的 View 模型中退出以便应用额外的逻辑并完成帖子的最干净的方法。

我这里有一个 fiddle :http://jsfiddle.net/kenswdev/YHHSu/7/

预先感谢您的任何建议!

Answer 1

这件事做得很好。回答您的问题:

1)是的，这是订阅的完美用例。

2) 您可以考虑创建一个构造函数来封装行项目所需的行为，而不是外部回调。例如:

function LineItem(id, text, quantity, quantityChangedCallback) {
    var self = this;
    self.id = ko.observable(id);
    self.itemName = ko.observable(text);
    self.quantity = ko.observable(quantity);

    self.quantity.subscribe(function() {
      self.onChange();
    });
};

LineItem.prototype = {
  onChange: function() {
    alert("Post change to server: " + ko.toJSON(this));
  }
};

您是否考虑过使用像 underscore 的 debounce() 这样的方法来消除 ajax 调用的抖动？这可能有助于防止出现非常啰嗦的 API 接口(interface):

• http://underscorejs.org/#debounce