1

ショッピングカートの例を見てみましょう...

ユーザーがアイテムを選択するたびに、カートの行に移動します。

/* would normally autoincrement */ 
var num = '1'; 
document.getElementById('cart').innerHTML = oldHTML + 
"<div id='line" + num + "'>
<input type='text' data-bind='value: quantity'>
<input type='text' data-bind='value: price'>
<input type='text' data-bind='value: extendedPrice'>
</div>";`

var lineVM () {
    var self = this;
    self.quantity = ko.observable();
    self.price = ko.observable();
    self.extendedPrice = ko.computed(function () {return self.price() * self.quantity();});
}

ko.applyBindings(new lineVM(), document.getElementById('line' + num));

行が追加されると、行 1、行 2 などがあります...

ドキュメントから：

必要に応じて、2 番目のパラメーターを渡して、データ バインド属性を検索するドキュメントの部分を定義できます。たとえば、ko.applyBindings(myViewModel, document.getElementById('someElementId')) です。これにより、アクティブ化が ID someElementId とその子孫を持つ要素に制限されます。これは、複数のビュー モデルを持ち、それぞれをページの異なる領域に関連付ける場合に便利です。

テストでは、分離がないことが示されています...ビューモデルを再利用すると、別の行を追加すると、その前の行が「空白」になります。ただし、不確定な行数に対して同じビューモデルが必要です。潜在的な行ごとに 100 個のビュー モデルを作成したくありません。また、101 個のアイテムを持つ予定の顧客のためにカートを壊したくありません。

では、単一のビュー モデルがあり、それをページ上の複数の領域に関連付けたい場合はどうすればよいでしょうか? ドキュメントは実際には言いません。Knockout で許可されていないことをしようとしていますか?

ご助力ありがとうございます。

4

1 に答える 1

2

全体のデザインを考え直したほうがいいと思います。なぜこのようなことをしないのですか？

var viewModel = function () {
    var self = this;
    self.items = ko.observableArray();
    self.addItem = function(num, quantity, price) {
        var item = {
            num: num,
            quantity: ko.observable(quantity),
            price: ko.observable(price)
        };
        item.extendedPrice = ko.computed(function() {
            return item.price() * item.quantity();
        }, self);
        self.items.push(item);
    };
};

ko.applyBindings(new viewModel());

HTML:

<div data-bind="foreach: items">
    <div data-bind="attr: { id: 'line' + num }">
        <input type="text" data-bind="value: quantity" />
        <input type="text" data-bind="value: price" />
        <input type="text" data-bind="value: extendedPrice" readonly="readonly" />
    </div>
</div>

原則は、observableArray にアイテムを追加してビューを変更することです。ビューモデルを動的に作成するべきではありません。

このコードでは、何らかの呼び出し方法がself.addItem必要であり、それは残りのコードの設計方法によって異なります。

編集：ちなみに、var lineVM () {コードの行はvar lineVM = function () {

また、このコードの誰かが機能しない場合は申し訳ありませんが、テストされていませんが、アイデアを得るのに役立つはずです.

于 2013-06-06T16:48:11.100 に答える