javascript - Knockout 多次点击绑定(bind)不适用于 IE8

Question

问题:

多次点击绑定(bind)在 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，并将其添加到收藏中。不是真实世界的例子，而是反射(reflect)了我正在解决的问题。 用户可以单击“添加”按钮，这将启动一个 jQuery 对话框，其中捕获有关书籍的一些信息。然后将其保存到模型上的可观察数组中，并更新书籍列表。

问题:

为什么 IE8 似乎只绑定(bind)第一次点击而不绑定(bind)第二次点击？如果我单击以添加一本书，则会显示该对话框。如果我单击添加 CD，什么也没有。我已调试，但函数未被调用。

TIA

Answer 1

据我所知，两者 都应该可以工作，而且在任何浏览器上都不能工作(而不只是不能在 IE8 上工作)，因为这两个函数都有同样的问题:它们不工作打开购物车:

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>