敲除复选框绑定不起作用答案

【问题标题】：Knockout checkbox binding not working敲除复选框绑定不起作用
【发布时间】：2014-09-22 21:04:17
【问题描述】：

我有下一个代码：

@{
    ViewBag.Title = "Index";
}
@model KO_MVC.Models.IndividualViewModel

<ul data-bind="foreach: Individuals">        
<li>
    <input type= "text" data-bind ="value: Name"/>
    <button data-bind="click: remove"> remove</button>

    <label> <input type="checkbox"  data-bind ="checked: HasAlias" />  </label>
    <input type ="text" data-bind="value: Alias, visible: HasAlias">
</li>

</ul>

<button data-bind="click: addItem"> add new</button>


<script>
    var data = @Html.Raw(new       System.Web.Script.
Serialization.JavaScriptSerializer().Serialize(Model));

var viewModel = function () 
{
    var self = this;
    ko.mapping.fromJS(data, {}, self);
    self.Individuals = ko.observableArray(self.Individuals());
    self.addItem = function() {
        self.Individuals.push({Name:"newIndividual", HasAlias: false, Alias:"" });
    };

    self.remove = function(data) {
        self.Individuals.remove(data);
    };
};
ko.applyBindings(viewModel);
</script>

当我向个人数组添加一个新项目时，该项目显示正常，但复选框什么都不做，预期结果是显示一个文本框

【问题讨论】：

标签： knockout.js knockout-mapping-plugin

【解决方案1】：

foreach 中的上下文存在问题，因为您在父上下文中有 addItem 和 remove，绑定将有 $parent。

HTML:-

     <ul data-bind="foreach:Individuals">
      <li>
        <input type="text" data-bind="value: Name" />
        <button data-bind="click: $parent.remove">remove</button>
        <label>
          <input type="checkbox" data-bind="checked: HasAlias" />
        </label>
        <input type="text" data-bind="value: Alias, visible: HasAlias" />

     </li>
   </ul>
   <button data-bind="click: addItem">add new</button>

JS:-

   var viewModel = function () {
   var self = this;

   self.Individuals = ko.mapping.fromJS(data);
    self.addItem = function () {
    self.Individuals.push({
        Name: "newIndividual",
        HasAlias: false,
        Alias: ""
     });
   };

    self.remove = function (data) {
      self.Individuals.remove(data);
    };
   };
    ko.applyBindings(new viewModel());

JSFiddle Demo

【讨论】：