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

Checkbox List Not working in Knockout JS

本文关键字：不起作用 JS Knockout 列表 复选框      更新时间：2023-09-26

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

使用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>

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

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

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中添加一个可观察的布尔值即可。

  1. templateOptions已被弃用一段时间。确保您阅读的文档是最新的
  2. Knockout绑定适用于对象properties，而不是私有变量。例如，用this.Id = id代替Id = id
  3. 在checked绑定中，您正在设置selectedEnquiryTypes，它是一个数组。绑定仅适用于布尔值/可以计算为布尔值（例如0,1）的值

为此，向每个enquiryType添加一个selected属性，并在computed中过滤所选项目，如@Skaol的fiddle中所示。

为了防止其他人遇到这个问题，我发布了适用于我的解决方案：

<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; }
    }

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

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

在淘汰赛中使用了映射插件来映射ViewModel:

var defaultModel = @Html.Raw(Json.Encode((CreateQuoteViewModel)Model));
var model = ko.mapping.toJS(defaultModel);
ko.applyBindings(model);

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

相关文章：