从嵌套循环中删除knockout函数中的父级

时间:2013-02-19 16:27:07

标签: javascript knockout.js knockout-2.0

在我看来,我循环遍历一个observableArray(itemGroup),它有一个属性也是一个observableArray(item)。我有一个删除整个itemGroup的方法和一个从itemGroup中删除项目的方法但是我想在它的行中添加一些逻辑,组中只剩下1个项目,删除该项目也应该删除itemGroup。

这是我的视图模型和视图的相关部分的示例。

我的JS

var ItemModel = function(item) {
   var self = this;
   self.name = ko.observable(item.name);
   self.price = ko.observable(item.price);
};

var ItemGroupModel = function(itemGroup) {
   var self = this;
   self.order = ko.observable(itemGroup.order);
   self.items = ko.observableArray(ko.utils.arrayMap(itemGroup.items, function(item){
      return new ItemModel(item);
   }));
   self.type = ko.observable(item.type);

   self.removeItem = function(item) {
      self.items.remove(item);
   }
};

var ViewModel = function(data) {
   var self = this;
   self.itemGroups = ko.observableArray(ko.utils.arrayMap(data.itemGroups, function(itemGroup) {
     return new ItemGroupModel(item);
   }));

  // some other properties and methods
   self.removeItemGroup = function(itemGroup) {
     self.itemGroups.remove(itemGroup);
  }
};

我的观点

<ul data-bind="foreach: {data: VM.itemGroups, as: 'itemGroup'}">
   <li>
       <button data-bind="click: $root.VM.removeItemGroup">X</button>
       <ul data-bind="foreach: {data: itemGroup.items, as: 'item'}">
          <li>
             <!-- ko if: itemGroup.items().length > 1 -->
             <button data-bind="click: itemGroup.removeItem">X</button>
             <!-- /ko -->
             <!-- ko ifnot: itemGroup.items().length > 1 -->
             <button data-bind="click: function () { $root.VM.removeItemGroup($parent) }">X</button>
             <!-- /ko -->
           </li>
       </ul>
   </li>
</ul>

这对我有用,但它并不理想。我的理解是,淘汰应该帮助我摆脱使用匿名函数,如“function(){$ root.VM.removeItemGroup($ parent)}”但我不知道如何以另一种方式做到这一点。同样删除if和ifnot语句也可以很好地清理。

1 个答案:

答案 0 :(得分:0)

我想提供我的解决方案

发送itemGroups和items的索引作为remove方法的参数。

希望您知道如何发送索引

然后检查itemGroups的长度

self.remove(itemGroupsIndex,itemsIndex) {
 var itemGroupsLength = self.itemGroups()[itemGroupsIndex].items().length;
  if(itemGroupsLength = 1) {

   self.itemGroups.remove(itemGroupsIndex);

  }
  else {

   self.itemGroups()[itemGroupsIndex].items.remove(itemsIndex);

  }
 };