Question

问题：

多次点击绑定在IE8中不起作用。

代码：

var Cart = function() {
    var self = this;
    self.books = ko.observableArray();
    self.cds = ko.observableArray();
};

var TheModel = function() {
    var self = this;
    self.cart = ko.observable(new Cart());
    self.showAddBook = function() {
        self.cart.books.push(/* new book */);
    };
    self.showAddCD = function() {
        self.cart.cds.push(/* new cd */);
    };
};

<div data-bind="with: cart">
    <h1>Books<h1>
    <button data-bind="click: $parent.showAddBook">Add</button>
    <div data-bind="foreach: books">
        <span data-bind="text: name"></span> <!-- book has a name property -->
    </div>
    <hr/>
    <h3>CDs</h3>
    <button data-bind="click: $parent.showAddCD">Add</button>
        <div data-bind="foreach: cds">
            <span data-bind="text: name"></span> <!-- cd has a name property -->
    </div>
</div>

背景

提前道歉。我无法在工作中访问jsFiddle。

我有一个完成这项工作的截止日期，这就是我使用jQuery使用knockout的原因。很想使用Angular，但不能因为我们必须支持IE8。很想使用Durandal，但我没有经验，也没有时间去学习它并完成这项工作。

用户可以创建新书或新CD并将其添加到集合中。不是现实世界的例子，而是反映了我正在解决的问题。用户可以单击“添加”按钮，这将启动一个jQuery对话框，该对话框捕获有关书籍的一些信息。然后将其保存到模型上的可观察数组中，并更新书籍列表。

问题：

为什么IE8似乎只绑定了第一次点击而不是第二次？如果我单击添加书籍，则会显示对话框。如果我点击添加CD，没有。我已经调试过，函数没有被调用。

TIA

Answer 1

据我所知，它们中的任何都不应该工作，而不是在任何浏览器上（而不仅仅是在IE8上工作），因为这两个函数都有同样的问题：它们没有展开cart：

self.cart.books.push(/* new book */);
//  ^^^^^^

cart是一个可观察的，所以你需要：

self.cart().books.push(/* new book */);
//       ^^

......同样适用于CD。

如果你解决了这个问题，它可以工作（即使在IE8上）：

var Cart = function() {
    var self = this;
    self.books = ko.observableArray();
    self.cds = ko.observableArray();
};

var TheModel = function() {
    var self = this;
    self.cart = ko.observable(new Cart());
    self.showAddBook = function() {
        self.cart().books.push({name: "New book " + (+new Date())});
    };
    self.showAddCD = function() {
        self.cart().cds.push({name: "New CD " + (+new Date())});
    };
};

ko.applyBindings(new TheModel(), document.body);

<div data-bind="with: cart">
    <h1>Books<h1>
    <button data-bind="click: $parent.showAddBook">Add</button>
    <div data-bind="foreach: books">
        <span data-bind="text: name"></span> <!-- book has a name property -->
    </div>
    <hr/>
    <h3>CDs</h3>
    <button data-bind="click: $parent.showAddCD">Add</button>
    <div data-bind="foreach: cds">
        <span data-bind="text: name"></span> <!-- cd has a name property -->
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

对于稍微不正确的例子道歉，但我错过了一级嵌套。我的例子不是我的复杂模型和实现的真实反映，但我找出了问题的原因。

我的购物车在这个例子中有一个selectedItem属性（一个可观察的）类型对象，它有书籍数组（可观察数组）和CD（可观察数组）。

var Items = function () { 
    this.books = ko.observableArray(); 
    this.cds = ko.observableArray(); 
}
var Cart = function() { 
    this.selectedItem = ko.observable(new Items()); 
}
var Model = function () { 
    this.cart = new Cart();  
}

我正在使用淘汰赛'与'绑定并将上下文设置为cart.selectedItem

<div data-bind="with: cart.selectedItem"> ... </div>

通过这种方法，我注意到只有第一次点击（添加书籍）才有效。点击添加CD无效。

我将上下文从cart.selectedItem更改为cart，并将 foreach 绑定（显示书籍和CD列表）设置为selectedItem().books和{{ 1}}，这在IE8和其他浏览器中有效。

如果我使用挖空'与'绑定更改上下文回selectedItem().cds，那么只有第一次点击有效。

希望能帮助遇到此问题的其他人。

敲除多次点击绑定不适用于IE8

2 个答案: