1

ノックアウトの foreach バインディングを使用して、数量入力フィールドを持つ在庫品目のリストを生成しています。ユーザーが数量を変更すると、新しい値をサーバーに投稿したいと思います。

解決策を思いつきましたが、ベスト ノックアウト プラクティスを使用しているかどうかについてのフィードバックに関心があります。

私は2つのビューモデルを使用しています。1 つは在庫を表し、個々の在庫品目の観察可能な配列にすぎません。

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

2 つ目は在庫品目を表します。

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) subscribe の使用は、数量が変更されたときに通知を受け取るための良い方法ですか? うまく機能しているようで、対応する数量入力要素のフォーカスが失われ、その値が変更されたときにのみ呼び出されます。これはまさに私が欲しいものです。

2) コールバック アプローチはどうですか? これはあまり正しくない部分ですが、追加のロジックを適用してポストを行うために、アイテムのビュー モデルから抜け出すために思いついた最もクリーンな方法でした。

ここにフィドルがあります：http://jsfiddle.net/kenswdev/YHHSu/7/

提案をお寄せいただきありがとうございます。

4

1 に答える 1

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インターフェースを防ぐのに役立つ可能性があります。

于 2013-01-03T00:23:28.530 に答える