我正在尝试着手研究 Knockout.js,但在涉及复选框时我很困惑。
服务器端我用相应的值填充了一组复选框。现在,当任何未选中的复选框被选中时,我需要将它的值存储在逗号分隔的字符串中。未选中时,需要从字符串中删除该值。
有人知道如何使用 knockoutjs 实现这一点吗?
到目前为止,我有以下代码:
View 模型:
$().ready(function() {
function classPreValue(preValue)
{
return {
preValue : ko.observable(preValue)
}
}
var editOfferViewModel = {
maxNumOfVisitors : ko.observable(""),
goals : ko.observable(""),
description : ko.observable(""),
contact : ko.observable(""),
comments : ko.observable(""),
classPreValues : ko.observableArray([]),
addPreValue : function(element) {
alert($(element).val());
this.classPreValues.push(new classPreValue(element.val()));
}
};
ko.applyBindings(editOfferViewModel);
});
我的复选框填充了一个 foreach 循环:
<input data-bind="checked: function() { editOfferViewModel.addPreValue(this) }"
type="checkbox" checked="yes" value='@s'>
@s
</input>
我尝试将复选框元素作为参数传递给我的 addPreValue()
函数,但是当我选中复选框时似乎没有任何反应?
非常感谢对此的任何帮助/提示!
最佳答案
检查的绑定(bind)期望传递一个它可以读/写的结构。这可以是变量、可观察对象或可写的 dependentObservable。
当传递数组或 observableArray 时,已检查的绑定(bind)确实知道如何从数组中添加和删除简单的值。
这是一个示例,其中还包括一个计算的可观察对象,该可观察对象包含以逗号分隔的值的数组。 http://jsfiddle.net/rniemeyer/Jm2Mh/
var viewModel = {
choices: ["one", "two", "three", "four", "five"],
selectedChoices: ko.observableArray(["two", "four"])
};
viewModel.selectedChoicesDelimited = ko.computed(function() {
return this.selectedChoices().join(",");
}, viewModel);
ko.applyBindings(viewModel);
HTML:
<ul data-bind="template: { name: 'choiceTmpl', foreach: choices, templateOptions: { selections: selectedChoices } }"></ul>
<script id="choiceTmpl" type="text/html">
<li>
<input type="checkbox" data-bind="attr: { value: $data }, checked: $item.selections" />
<span data-bind="text: $data"></span>
</li>
</script>
关于javascript - 使用 knockoutjs 中的复选框列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6736136/