Использование массивов внутри нокаута наблюдаемого

Question

У меня есть наблюдаемые массивы, привязанные к html-полям в пользовательском интерфейсе.

Однако изменения в этих полях в пользовательском интерфейсе не отражаются в модели просмотра, поскольку согласно документации по нокауту, наблюдаемый массив отслеживает, какие объекты находятся в массиве, а не состояние этих объектов.

Код выглядит, как показано ниже:

var RewardMissionModel = function() { 
    var self = this; 
    self.achievementID = ko.observable(); 
    self.rewardAsset = ko.observable(); 
    self.rewards = ko.observableArray([new Reward("Points", "Qty", "", "Item", "")]); 

    self.isDirty = false; 

    //Add reward 
    self.addReward = function() { 
     //var self = this; 
     var tempRewardType = "Points"; 
     self.rewards.push(new Reward(tempRewardType, "Qty", "", "Item", "", 0)); 
    }; 

    //Remove reward 
    self.removeReward = function (reward) { 
     if (self.rewards().length > 1) 
      self.rewards.remove(reward); 
    }; 
    //------------------------------------------------------------------------------ 
}; 

function Reward(rewardType, quantityLabel, rewardQuantity, itemLabel, item, itemID) { 
    var self = this; 
    //self.viewModel = viewModel; 
    self.rewardTypes = ["Points", "Coins", "Items"];  
    self.rewardType = ko.observable(rewardType); 
    self.itemLabel = ko.observable(itemLabel); 
    self.itemText = ko.observable(item); 
    self.quantityLabel = ko.observable(quantityLabel); 
    self.rewardQuantity = ko.observable(rewardQuantity); 
    this.selectedRewardType = ko.observable(rewardType); 
    self.isItemType = function (selectedRewardType) { 
     return selectedRewardType === this.selectedRewardType(); 
    } 

    self.itemID = ko.observable(itemID); 

} 

HTML код:

<div data-bind="template: { name: 'rewards-template', foreach: rewards }"></div> 
       <script type="text/html" id="rewards-template"> 
        <span style="margin-left:30px">Reward Type</span> 
        <select class="dropdown" data-bind="options: rewardTypes, value: selectedRewardType"></select> 
        <span data-bind="text: itemLabel, visible: isItemType('Items')"></span> 

Грязный флаг ViewModel получает набор, когда я добавлять или удалять объекты в наблюдаемом массиве, но когда я изменить на UI не учитывается.

Одним из подходов может быть размещение нормального массива в пределах наблюдаемого.

Есть ли какой-либо пример кода, чтобы освежить этот или любой лучший подход?

Пожалуйста, помогите.

Answer 1

Я думаю, что лучший способ сделать свойства вашего наблюдаемого объекта массива действительными как наблюдаемые, - сделать их также наблюдаемыми, чтобы вы создавали наблюдаемый массив, который также можно наблюдать. Например ::

var viewModel = { 
    accounts: ko.observableArray([]), 
    init: function() { 
     this.accounts.push({ 
      Property1: ko.observable("some value"), 
      Property2: ko.observable("some value"), 
      Property3: ko.observable("some value") 
      }); 
     } 
    }; 

любезно проверить этот вопрос, я думаю, что это то, что вы ищете

Updating of object inside observable array is done but changes are not coming on browser

Answer 2

function MyObject(val1, val2) 
{ 
    this.firstProperty = ko.observable(val1); 
    this.secondProperty = ko.observable(val1); 
} 

var myViewModel = new function() 
{ 
    var self = this; 
    self.values = ko.observableArray([]); 
    self.values.push(new MyObject("value11", "value12")); 
    self.values.push(new MyObject("value21", "value22")); 
}