使用knockoutjs中的复选框列表

Question

我试图了解Knockout.js并且在复选框方面我很困惑.

服务器端我正在填充一组带有相应值的复选框.现在,当选中任何未选中的复选框时,我需要将其值存储在逗号分隔的字符串中.取消选中它们时,需要从字符串中删除该值.

有没人知道如何用knockoutjs实现这个目标？

到目前为止,我有以下代码:

视图模型:

$().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>

我尝试将checkbox元素作为参数传递给我的addPreValue()函数,但是当我选中复选框时似乎没有发生任何事情？

任何帮助/提示都非常感谢!

Answer 1

检查的绑定期望传递一个可以读/写的结构.这可以是变量,可观察或可写的dependentObservable.

传递数组或observableArray时,检查的绑定确实知道如何从数组中添加和删除简单值.

下面是一个示例,它还包含一个计算的observable,它包含以逗号分隔值的数组. 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>