Javascript 动态创建绑定到可观察数组内可观察对象的复选框是'；行不通

为了更好地理解KnockoutJS的工作原理，我一直在使用KnockoutJS，这最终导致了一些非传统的编码

以下是脚本：

var ViewModel = function() {
    var self = this;

    self.counter = ko.observable(0);
    self.someFruits = ko.observableArray();

    self.createbox = function (){
        var value = {
            name: self.counter(),
            isChecked: ko.observable(true)
        };

        self.someFruits.push(value);

        $("#div1").append('<div><input type="checkbox" data-bind="checked: someFruits()[' + self.counter() + '].isChecked" /> Cherry</div>');

        $("#div2").append('<div><input type="checkbox" data-bind="checked: someFruits()[' + self.counter() + '].isChecked" /> Cherry</div>');

        self.counter(self.counter() + 1);
    }
};

ko.applyBindings(new ViewModel()); 

var ViewModel=function（）{
var self=这个；
自身计数器=可观察的ko（0）；
self.someFruits=ko.observativearray（）；
self.createbox=函数（）{
var值={
名称：self.counter（），
isChecked:ko.可观察（真）
};
自我。一些水果。推动（价值）；
$（“#div1”）。追加（'Cherry'）；
$（“#div2”）.append（'Cherry'）；
自计数器（自计数器（）+1）；
}
};
应用绑定（新的ViewModel（））；

以下是HTML：

<div>
    <div>
        <button data-bind="click: createbox" type="button" class="btn btn-warning">Create Box</button>
    </div>

    <div id="div1">
    </div>
    <br>
    <br>
    <div id="div2">
    </div>
</div>

创建框

我试图模拟的是动态创建复选框的功能，该复选框将数据绑定到可观察数组中的可观察对象。因此，我制作了一个按钮，它将

将包含
ko.observable
的新对象推到
observableArray
中。然后使用Jquery附加HTML标记以创建新的复选框。我每次都会在不同的
div
中添加两个相同的复选框，以查看它们是否根据绑定对象进行更新

这很野蛮，理想情况下，我不应该为了这些目的使用JQuery，也许在这里使用
foreach
会更好。但我还是想理解为什么这在我认为应该的时候不起作用

编辑：例如，如果我单击按钮3次，将为每个
div
创建3个复选框，使其在enitre页面中总共有6个复选框。如果我选中第一个
id=div1
中的第一个复选框，那么
id=div2
中的第一个复选框也应该同样更新。我一直在使用JSFIDLE来测试这一点，当单击对应的复选框时，复选框不会自动更新。
在knockout中，您很少需要使用jquery从UI中追加/删除内容。您的
viewModel
应该控制所有添加、删除或任何类型的DOM操作。在您的情况下，您正在推动
someFruits
observearray。使用绑定来显示它们

因此，在下面的代码片段中，我添加了一个输入来添加新的水果。此外，当您更改复选框时，还将显示“选中”水果的属性


var ViewModel=function（）{
var self=这个；
self.fruthName=ko.observable（）；
self.someFruits=ko.observearray（[]）；
self.createbox=函数（）{
自我推({
名称：self.fructName（），
isChecked:ko.可观察（真）
});
//添加水果后清除输入
自我名称（“”）；
}
//每次“someFruits”或“isChecked”更改时，都会再次计算该值
self.checkedFruits=ko.computed（函数（）{
返回self.someFruits（）
.filter（a=>a.isChecked（））
.map（b=>b.name）；
})
};
应用绑定（新的ViewModel（））

创建框

精选水果：
在knockout中，很少需要使用jquery从UI中追加/删除内容。您的
viewModel
应该控制所有添加、删除或任何类型的DOM操作。在您的情况下，您正在推动
someFruits
observearray。使用绑定来显示它们

因此，在下面的代码片段中，我添加了一个输入来添加新的水果。此外，当您更改复选框时，还将显示“选中”水果的属性


var ViewModel=function（）{
var self=这个；
self.fruthName=ko.observable（）；
self.someFruits=ko.observearray（[]）；
self.createbox=函数（）{
自我推({
名称：self.fructName（），
isChecked:ko.可观察（真）
});
//添加水果后清除输入
自我名称（“”）；
}
//每次“someFruits”或“isChecked”更改时，都会再次计算该值
self.checkedFruits=ko.computed（函数（）{
返回self.someFruits（）
.filter（a=>a.isChecked（））
.map（b=>b.name）；
})
};
应用绑定（新的ViewModel（））

创建框

精选水果：
感谢您的工作：）尽管我仍然不明白为什么原始版本不起作用，但它教会了我在使用KnockoutJS时更干净的方法。所以我会接受它。@CodeIntern调用
applyBindings（）
后，任何动态添加的HTML和敲除绑定都将无效。哦，我明白了。这消除了许多疑虑。非常感谢。谢谢你的工作：）尽管我仍然不明白为什么原来的不起作用，但它教会了我在使用KnockoutJS时更干净的方法。所以我会接受它。@CodeIntern调用
applyBindings（）
后，任何动态添加的HTML和敲除绑定都将无效。哦，我明白了。这消除了许多疑虑。非常感谢。