Как обработать привязку: foreach после изменения данных в observableArray

Question

Я изменяю observableArray, изменяю некоторые данные в событии подписки. Сначала я конвертирую ObservableArray, используя ko.to JS (), отображаю данные и изменяю. В конце я вызываю self.menuCategories (jsArray), чтобы снова установить observableArray.

Похоже, я каким-то образом теряю «связь» с observableArray, поскольку оператор foreach в моем коде внезапно ломается.

Либо есть гораздо более простой способ справиться с этим, либо я неправильно обрабатываю наблюдаемые.

КОД:

var MenuWizardModel = function() {
   var self = this;
   self.menuCategories = ko.observableArray();
   self.commonDiscount = ko.observable(0);

   // Handling adding items to menuCategories.
   self.addNewSubMenuItem = function () {
        var newSubMenuItem = new SubMenuItemViewModel(self.newSubMenuItemName(), []);
        self.menuCategories.push(newSubMenuItem);
        self.newSubMenuItemName(null);
        self.createNewSubMenu(false);
    }

  function SubMenuItemViewModel(name, foodItemList) {
       var self = this;
       self.name = ko.observable(name);
       self.foodItemList = ko.observableArray(foodItemList);
  }

   self.commonDiscount.subscribe(function(val) {
        var discount = parseInt(val) / 100;
        var jsArray = ko.toJS(self.menuCategories);
        console.log(jsArray)
        jsArray = ko.toJS(jsonArray[0].foodItemList.map(item => {
            item.price = parseInt(item.price) - (parseInt(item.price) * discount);
            return item;
        }));
        self.menuCategories(jsArray);
    });

РАЗМЕТКА:

 <div data-bind="foreach: menuCategories">
          <h4 data-bind="text: name"></h4>
          <div data-bind="foreach: foodItemList" class="list-group">
          ...

ДАННЫЕ:

введите описание изображения здесь

Answer 1

Я думаю, что лучший способ справиться с этим типом вещей - добавить вычисляемую наблюдаемую к элементу food, которая фиксирует глобальную скидку и вычисляет цену со скидкой.

что-то вроде следующего.

var MenuWizardModel = function() {
  var self = this;
  self.menuCategories = ko.observableArray([{
    name: 'Main Meals'
  }]);
  self.commonDiscount = ko.observable(0);
  self.newSubMenuItemName = ko.observable();
  
  // Handling adding items to menuCategories.
  self.addNewSubMenuItem = function() {
    var newSubMenuItem = new SubMenuItemViewModel(self.newSubMenuItemName(), [{name: 'Oranges', price: 3.99}]);
    self.menuCategories.push(newSubMenuItem);
    self.newSubMenuItemName(null);
    //self.createNewSubMenu(false);
  }
  function mapFoodItem(item){
    item.discountedPrice= ko.pureComputed(function(){
      var discount = parseInt(self.commonDiscount()) / 100
      return parseInt(item.price) - (parseInt(item.price) * discount);
    });
    return item;
  }
  
  function SubMenuItemViewModel(name, foodItemList) {
    var self = this;
    self.name = ko.observable(name);
    self.foodItemList = ko.observableArray(foodItemList.map(mapFoodItem));
  }
};

ko.applyBindings(new MenuWizardModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<label>Discount <input data-bind="value: commonDiscount"></label>
<label>Sub Menu Name: <input data-bind="value: newSubMenuItemName" /></label>
<button data-bind="click: addNewSubMenuItem">Add Sub Menu</button>

<div data-bind="foreach: {data: menuCategories, as: 'menu' }">
  <h4 data-bind="text: menu.name"></h4>
  <div data-bind="foreach: {data: menu.foodItemList, as: 'food'}" class="list-group">
    <div class="list-group-item">
      Name: <span data-bind="text: food.name"></span> 
      Price: <span data-bind="text: food.price"></span>
      Discounted Price: <span data-bind="text: food.discountedPrice"></span>
    </div>
  </div>
</div>