Knockout 多次点击绑定不适用于 IE8

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 的淘汰赛。很想使用 Angular 但不能，因为我们必须支持 IE8。很想使用 Durandal，但我没有这方面的经验，也没有时间学习它并完成这项工作。

用户可以创建新书或新 CD 并将其添加到 collection。不是 real-world 示例，而是反映了我正在解决的问题。用户可以单击“添加”按钮，这会启动一个 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();  
}

我正在使用敲除“with”绑定并将上下文设置为 cart.selectedItem

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

通过这种方法，我注意到只有第一次点击（添加书籍）有效。点击添加 CD 没有任何反应。

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

如果我使用敲除“with”绑定将上下文更改回 cart.selectedItem，则只有第一次点击有效。

希望对遇到此问题的其他人有所帮助。

Knockout 多次点击绑定不适用于 IE8

Knockout multiple click bindings do not work with IE8

javascript

jquery

internet-explorer-8

knockout.js