從父在淘汰賽中刪除子

Question

模型

public class model 
    { 
    public int modelid { get; set; } 
    public string name { get; set; } 

    public List<childModel> childModel{ get; set; } 
} 
public class childModel 
{ 

    public int childModelid { get; set; } 
    public string childname { get; set; } 
} 

Java腳本

@{ 
    var datam = new JavaScriptSerializer().Serialize(Model); 
} 
var helloWorldModel = { 
     model: ko.mapping.fromJS(@Html.Raw(datam)), 
     dele: function (models) { 
      helloWorldModel.model.remove(models); 
     } 
    } 

ko.applyBindings(helloWorldModel); 

HTML

<span data-bind="foreach:model"> 
     <span data-bind="text : name"></span> 

     <span data-bind="foreach:childmodel"> 
      <input type="text" data-bind="value:childname" /> 
     </span> 

    <input type="button" data-bind="click:$parent.dele" value="delete parent" /> 
    </span> 

這樣我就可以刪除的模式，但有什麼辦法可以去除childmodel蒙山此結構體？ 是這樣的：

 deleChildModel: function (Childmodels) { 
      helloWorldModel.model.childModel.remove(Childmodels); 
     } 

我可以新增modelid到ChildModel然後用

  deleChildModel: function (Childmodels) { 
      helloWorldModel.model()[Childmodels.modelid].childModel.remove(Childmodels); 
      } 

，但我要找的東西簡單

Answer 1

您可以使用bind有按鈕通過父母以及孩子的deleteChild功能。 bind的第一個參數提供了調用結果函數時的上下文（this）。

var models = [{ 
 
    name: 'One', 
 
    childmodel: [{ 
 
    childname: "SubOne" 
 
    }] 
 
}, { 
 
    name: 'Two', 
 
    childmodel: [{ 
 
    childname: "SubTwo" 
 
    }] 
 
}]; 
 

 
var vm = (function() { 
 
    var self = { 
 
    model: ko.mapping.fromJS(models), 
 
    dele: function(item) { 
 
     self.model.remove(item); 
 
    }, 
 
    deleteChild: function(child) { 
 
     var parent = this; 
 
     parent.childmodel.remove(child); 
 
    } 
 
    }; 
 
    return self; 
 
}()); 
 

 
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script> 
 
<span data-bind="foreach:model"> 
 
     <span data-bind="text : name"></span> 
 

 
<span data-bind="foreach:childmodel"> 
 
      <input type="text" data-bind="value:childname" /> 
 
      <button data-bind="click:$root.deleteChild.bind($parent)">Delete Child</button> 
 
     </span> 
 

 
<input type="button" data-bind="click:$parent.dele" value="delete parent" /> 
 
</span>