复选框列表在 Knockout JS 中不起作用答案

【问题标题】：Checkbox List Not working in Knockout JS复选框列表在 Knockout JS 中不起作用
【发布时间】：2015-03-23 09:58:38
【问题描述】：

我是 Knockout 的新手。我正在尝试创建一个复选框列表，我在这里遵循了答案：

Working with a list of checkboxes in knockoutjs

但我在尝试绑定复选框的 CHECKED 属性时遇到错误。

HTML：

<ul data-bind="template: { name: 'choiceTmpl', foreach: EnquiryTypeList, templateOptions: { selections: SelectedEnquiryTypes } }"></ul>

<script id="choiceTmpl" type="text/html">
    <li>
        <input type="checkbox" data-bind="attr: { value: $data.Id }, checked: SelectedEnquiryTypes" />
        <span data-bind="text: $data.Text"></span>
    </li>
</script>

JavaScript：

var viewModel = {
    EnquiryTypeList: [new EnquiryType(1, "Text 1"), new EnquiryType(2, "Text 2")],
    SelectedEnquiryTypes: ko.observableArray()

};

function EnquiryType(id, text){
    Id = id,
    Text = text
};

ko.applyBindings(viewModel);

当我用1 或0 代替checked: SelectedEnquiryTypes 时，它可以工作

<ul data-bind="template: { name: 'choiceTmpl', foreach: EnquiryTypeList, templateOptions: { selections: SelectedEnquiryTypes } }"></ul>

<script id="choiceTmpl" type="text/html">
    <li>
        <input type="checkbox" data-bind="attr: { value: $data.Id }, checked: 1" />
        <span data-bind="text: $data.Text"></span>
    </li>
</script>

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

我认为你应该使用ko.computed。示例如下：http://jsfiddle.net/7ac8v0wa/5/

【讨论】：

【解决方案2】：

不确定您在尝试什么。要在单击复选框时显示文本，您可以使用以下内容。

HTML：

<ul data-bind="foreach: EnquiryTypeList">

    <li>
        <input type="checkbox" data-bind="attr: { value: Id }, checked: Check" />
        <!-- ko if: Check -->
        <span data-bind="text: Text"></span>
        <!-- /ko -->
    </li>

</ul>

JavaScript：

var viewModel = {
    EnquiryTypeList: ko.observableArray([new EnquiryType(1, "Text 1"), new EnquiryType(2, "Text 2")]),
};

function EnquiryType(id, text){
    this.Id = ko.observable(id),
    this.Text = ko.observable(text),
    this.Check = ko.observable(false);
};

ko.applyBindings(viewModel);

要观察 EnquiryType 中的元素，您还必须使它们可观察。由于您想跟踪列表，因此应该是 observableArray。要检查复选框是否被选中，只需在 EnquiryType 中添加一个 boolean observable。

【讨论】：

【解决方案3】：

templateOptionshas been deprecated for a while。确保您阅读的文档是最新的。
敲除绑定使用对象properties，而不是私有变量。例如，不要使用Id = id，而是使用this.Id = id。
在checked 绑定中，您设置了selectedEnquiryTypes，它是一个数组。绑定仅适用于可以评估为布尔值的布尔值/值（例如 0,1）。

为此，为每个 enquiryType 添加一个selected 属性，并在computed 中过滤所选项目，如@Skaiol's fiddle。

【讨论】：

【解决方案4】：

以防万一其他人遇到这个问题，我发布了对我有用的解决方案：

<div id="EnquiryType" class="collapse col-md-12">
    <ul data-bind="foreach: Items" class="list-inline">
       <li>
           <input type="checkbox" data-bind="attr: { value: Id }, checked: Checked" />
            <span data-bind="text: Text"></span>
       </li>
    </ul>
</div>

在服务器端我创建了一个名为：CheckBoxViewModel的类

    public class CheckBoxViewModel
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public bool Checked { get; set; }
    }

在我的 ViewModel 中向 View 传递了一个 List<CheckBoxViewModel>，

public class ViewModel{

public List<CheckBoxViewModel> Items {get;set;}
}

在 Knockout 中使用 Mapping Plugin 来映射 ViewModel：

var defaultModel = @Html.Raw(Json.Encode((CreateQuoteViewModel)Model));

var model = ko.mapping.toJS(defaultModel);

ko.applyBindings(model);

所以基本上我编辑了我的逻辑以使用：@Thalsan's Answer。

【讨论】：