KnockoutJS foreach list - post到服务器上的项目更改，最佳实践

KnockoutJS foreach list - post to server on item change, best practice

本文关键字：项目 最佳 list foreach post 服务器 KnockoutJS      更新时间：2023-09-26

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

我已经想出了一个解决方案，但我对是否使用最佳击倒实践的反馈很感兴趣。

我使用两个视图模型。一个表示库存，只是单个库存行项目的可观察数组:

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)那么回调方法呢?这是感觉不太对的部分，但这是我能想到的最干净的方式，可以从项目的视图模型中返回，以便应用额外的逻辑和执行post。

我有一个小提琴:http://jsfiddle.net/kenswdev/YHHSu/7/

提前感谢您的任何建议!

做得很好。关于你的问题:

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));
  }
};

您是否考虑过用下划线的debounce()之类的东西来解除ajax调用?这可能有助于防止一个非常喋喋不休的API接口:

  • http://underscorejs.org/防反跳
相关文章：