使用Knockout.js(MVC Razor)将复选框绑定到数组

Question

我有一个看起来像这样的Knockout.js视图模型:

"UserName":null,
"FirstName":null,
"LastName":null,
"Countries":{
    "arrCountries":[]
}

还有一组国家/地区复选框,所有这些都必须使用相同的data-bind值进行渲染(我使用这个自定义CheckBoxListFor帮助程序,它可以将自定义HTML应用于每个复选框,但每个复选框都是相同的自定义HTML.它需要一个列出的属性从我的剃刀视图模型中的每个可用国家创建复选框,然后根据另一个剃刀视图模型属性渲染一些标记).

复选框值是整数(1,2,3等),它是我想要放入arrCountries视图模型属性的那些整数.

以下是当前立即呈现复选框的方式:

<input checked="checked" data_bind="checked: ???" id="Countries.arrCountries107" name="Countries.arrCountries" type="checkbox" value="1"></input>

我已经证明了使用viewModel.Countries.arrCountries.push(1);更新视图模型的概念(后面是一个警告,它让我计算arrCountries中的元素以证明push工作原理),但我似乎无法data-bind在复选框上获取HTML属性连线,以便在我发送push和remove命令时检查和取消选中.

任何帮助非常感谢!

Answer 1

使选中的数据属性指向所选国家/地区.如果复选框的值在复选框数组中,则将进行检查.否则就不会这样.

<input checked="checked" data-bind="checked: Countries" type="checkbox" value="3"></input>

看看我提出的这个小提琴.

http://jsfiddle.net/u8xP9/3/