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

随着行的添加，我们有 line1、line2 等......

从文档：

或者，您可以传递第二个参数来定义要在文档的哪个部分搜索数据绑定属性。例如，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中添加item来改变视图。你真的不应该动态地创建视图模型。

使用此代码，您必须有某种调用方式self.addItem，这取决于您如何设计代码的其余部分。

编辑：顺便说一句，var lineVM () {您的代码中的行应该是var lineVM = function () {

另外，很抱歉，如果此代码中的某个人不起作用，它未经测试，但应该可以帮助您了解这个想法。

于 2013-06-06T16:48:11.100 回答