在 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>

我尝试将复选框元素作为参数传递给我的addPreValue() 函数，但是当我选中复选框时似乎没有任何反应？

非常感谢任何帮助/提示！

Answer 1

被检查的绑定期望被传递一个它可以读/写的结构。这可以是一个变量、一个 observable 或一个可写的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>

Answer 2

为什么在线某处没有互斥复选框示例

自从我在搜索互斥复选框时首先出现此链接以来，我将在这里分享我的答案。我竭尽全力将头撞在墙上。顺便说一句，当您在绑定内联 knockoutjs 中处理 click 事件时，即使您从函数返回 true，它似乎也会断开绑定（可能只是因为我试图调用如下定义的 resetIllnesses 函数）。也许有更好的方法，但在那之前请跟随我的领导。

这是我需要绑定的类型。

var IllnessType = function (name,title) {
    this.Title = ko.observable(title);
    this.Name = ko.observable(name);
    this.IsSelected = ko.observable(false);
};

要绑定的数组。

model.IllnessTypes = ko.observableArray(
    [new IllnessType('IsSkinDisorder', 'Skin Disorder'),
        new IllnessType('IsRespiratoryProblem', 'Respiratory Problem'),
        new IllnessType('IsPoisoning', 'Poisoning'),
        new IllnessType('IsHearingLoss', 'Hearing Loss'),
        new IllnessType('IsOtherIllness', 'All Other Illness')]
);

重置疾病功能将其全部清除。

model.resetIllnesses = function () {
    ko.utils.arrayForEach(model.IllnessTypes(), function (type) {
        type.IsSelected(false);
    });
};

标记

<ul data-bind="foreach:IllnessTypes,visible: model.IsIllness()">
    <li><label data-bind="html: Title"></label></li>
    <li><input class="checkgroup2" type="checkbox" 
data-bind="attr:{name: Name },checked:IsSelected" /></li>
</ul>

这行不通

如果你一直在努力尝试调用下面的 resetIllness 函数，你会感受到我的痛苦。

<input type='checkbox' data-bind="checked:IsSelected, 
  click: function() { model.resetIllnesses(); return true; }" />

你一直在分担我的痛苦。好吧，它有效！当您从以下示例中调用它时。 请注意，我在上面添加了一个类，以便我可以添加点击功能。

解决所有问题的脚本。

<script type="text/javascript">
    $(function() {
        $(".checkgroup2").on('click', function() {
            model.resetIllnesses();
            var data = ko.dataFor(this);
            data.IsSelected(true);
        });
    });
</script>

向服务器发送信息

另外，在我的情况下，我必须将信息发送到服务器，而不是默认的 html 格式，所以我稍微更改了输入。

<input class="checkgroup2" type="checkbox" data-bind="checked:IsSelected" />
<input type="hidden" data-bind="attr:{name: Name },value:IsSelected" />