Question

In my view I am looping through an observableArray (itemGroup) that has one property that is also an observableArray (item). I have a method to remove an entire itemGroup and one to remove an item from and itemGroup but I would like to add in some logic along the lines of it there is only 1 item left in the group removing that item should also remove the itemGroup.

here is an example of the relevant parts of my view model and view.

my 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);
  }
};

My View

<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>

This works but to me it isnt ideal. It is my understanding that knockout should help me get away from using an anonymous function like “function () { $root.VM.removeItemGroup($parent) }” but I am not sure how to do it another way. Also removing the if and ifnot statements would be good to clean up as well.

Answer 1

I would like to give my solution

send index of itemGroups and items as argument to remove method.

Hope you know how to send index

Then check the length of 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);

  }
 };