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

时间:2013-01-02 23:46:49

标签: javascript jquery knockout.js

我正在使用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)回调方法怎么样?这是一个感觉不太合适的部分,但这是我能够提出的最简单的方法,以便从项目的视图模型中退出以应用其他逻辑并进行发布。

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

提前感谢任何建议!

1 个答案:

答案 0 :(得分: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));
  }
};

您是否考虑过使用下划线的debounce()来解除你的ajax调用?这可能有助于防止非常繁琐的API接口: