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

Question

我是 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>

Answer 1

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

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。

Answer 2

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

Answer 3

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

为此，为每个查询类型添加一个 selected 属性，并在 computed 中过滤所选项目，如 @Skaiol's fiddle.

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

在服务器端我创建了一个 class 调用：CheckBoxViewModel

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

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

public class ViewModel{

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

在 Knockout 中使用映射插件映射 ViewModel：

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

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

ko.applyBindings(model);

所以基本上我编辑了我的逻辑以使用：@Thalsan 的答案。

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

Checkbox List Not working in Knockout JS

javascript

knockout.js