Question

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

Working with a list of checkboxes in knockoutjs

但是在尝试绑定Checkbox的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

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

Answer 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中添加一个布尔observable。

Answer 3

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

为此，请为每个enquiryType添加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>

在服务器端我创建了一个名为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中使用Mapping Plugin来映射ViewModel：

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

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

ko.applyBindings(model);

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

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

4 个答案: