我是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中添加一个可观察的布尔值即可。
templateOptions
已被弃用一段时间。确保您阅读的文档是最新的- Knockout绑定适用于对象
properties
,而不是私有变量。例如,用this.Id = id
代替Id = id
- 在
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的答案。