我一直在玩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());
这是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>
我尝试模拟的是动态创建复选框的功能,该复选框将数据绑定到observable-array中的可观察对象。所以我创建了一个按钮,push
一个新对象,其中包含ko.observable
到observableArray
。然后使用Jquery附加HTML标记以创建新的复选框。我每次向不同的div
添加两个相同的复选框,只是为了查看它们是否根据绑定对象进行更新。
这是野蛮的,理想情况下,我不应该将JQuery用于这些目的,也许foreach
在这里会很好。但是,我仍然想知道为什么在我认为应该这样做时这不起作用。
编辑:例如,如果我单击按钮3次,将为每个div
创建3个复选框,使其在enitre页面中共有6个复选框。如果我选中第一个id=div1
中的第一个复选框,则id=div2
中的第一个复选框也应该同等更新。我一直在使用JSFiddle对其进行测试,并且单击其对应项时复选框不会自动更新。
答案 0 :(得分:2)
在淘汰赛中,你很少需要使用jquery从UI中追加/删除东西。您的viewModel
应该控制所有添加,删除或任何类型的DOM操作。在您的情况下,您正在推动someFruits
observableArray。使用foreach
绑定来显示它们。
因此,在下面的代码片段中,我添加了一个输入来添加新的水果。此外,还有computed属性,当您更改复选框时,会显示“已检查”的水果。
var ViewModel = function() {
var self = this;
self.fruitName = ko.observable();
self.someFruits = ko.observableArray([]);
self.createbox = function() {
self.someFruits.push({
name: self.fruitName(),
isChecked: ko.observable(true)
});
// clear the input after a fruit is added
self.fruitName('');
}
// every time "someFruits" or "isChecked" changes this gets computed again
self.checkedFruits = ko.computed(function() {
return self.someFruits()
.filter(a => a.isChecked())
.map(b => b.name);
})
};
ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div>
<div>
<input data-bind="value: fruitName" />
<button data-bind="click: createbox" type="button" class="btn btn-warning">Create Box</button>
</div>
<div id="div1" data-bind="foreach:someFruits">
<div>
<input type="checkbox" data-bind="checked: isChecked" />
<span data-bind="text: name"></span>
</div>
</div>
<br> Selected fruits:
<span data-bind="text: checkedFruits"></span>
</div>
点击Run Code snippet
进行测试。 Here's a fiddle如果你想玩它。如果你正在学习淘汰赛,我认为最好不要在一段时间内包括jquery:)