observableArray中的可觀察對象不會自動更新

我一直在尋找動態數據綁定的Knockout，我有一種情況，我需要一個可觀察數組來包含多個可觀察對象。observableArray中的可觀察對象不會自動更新

這是我的代碼：

<ul data-bind="foreach: { data: categories, as: 'category' }"> 
    <li> 
     <ul data-bind="foreach: { data: items, as: 'item' }"> 
      <li> 
       <span data-bind="text: category.name"></span>: 
       <span data-bind="text: item"></span> 
       <input type="text" data-bind="value: item"/> 
      </li> 
     </ul> 
    </li> 
</ul> 

$(document).ready(function() { 
      ko.applyBindings(viewModel); 
     }); 

     var viewModel = { 
      categories: ko.observableArray([ 
       { name: 'Fruit', items: [ko.observable('Apple'), ko.observable('Orange'), ko.observable('Banana')] }, 
       { name: 'Vegetables', items: [ko.observable('Celery'), ko.observable('Corn'), ko.observable('Spinach')] } 
      ]) 
     };

與oject觀測工作時通常我可以修改的文本輸入框的值，該值設置爲其中使用該屬性來顯示整個頁面。

在我當前的例子中，我試圖對我的輸入框做同樣的事情，但是在我修改了文本框中的值之後，span並沒有達到curent值。

如何讓observableArray中的可觀察對象像獨立可觀察對象一樣運行？

來源

2013-05-22 aleczandru

當我遇到這些問題時，我喜歡將它們分解爲子vms，這使我可以更好地控制在每個級別的上下文中發生的事情，對於上述問題，我會這樣做：

var produceVM = function (data) { 
    var self = this; 

    self.item = ko.observable(data); 
} 

var categoryVM = function (data) { 
    var self = this; 

    self.name = ko.observable(data.name); 
    self.items = ko.observableArray(); 

    var items = ko.utils.arrayMap(data.items, function (item) { 
     return new produceVM(item); 
    }); 

    self.items(items); 
} 

var viewModel = function (data) { 
    var self = this; 

    self.categories = ko.observableArray(); 

    var categories = ko.utils.arrayMap(data, function (category) { 
     return new categoryVM(category); 
    }); 

    self.categories(categories); 
} 

var data = [ 
    { name: 'Fruit', items: [ 'Apple', 'Orange', 'Banana' ] }, 
    { name: 'Vegetables', items: ['Celery', 'Corn', 'Spinach' ]} 
]; 

ko.applyBindings(new viewModel(data));

我相信ko映射插件可以實現類似於此的內容，而無需編寫所有上述代碼。你可以傳遞它的數據模型，它會構造每個項目的觀察值。

來源

2013-05-25 23:18:44

由於@nemesv指出，答案就在這個角落。

只需將每個數組項包裝到對象中，它就能完美地工作。

這是您的視圖模型應該是什麼樣子，這裏是一個工作jsfiddle

var viewModel = { 
    categories: ko.observableArray([{ 
     name: 'Fruit', 
     items: [ 
      {name: ko.observable('Apple')}, 
      {name: ko.observable('Orange')}, 
      {name: ko.observable('Banana')} 
     ] 
    }, { 
     name: 'Vegetables', 
     items: [ 
      {name: ko.observable('Celery')}, 
      {name: ko.observable('Corn')}, 
      {name: ko.observable('Spinach')} 
     ] 
    }]) 
};

我有我自己的經驗說，通常你就會有內部數組對象，無論如何，不是說有並不是其他用例，只是說在數組中有對象並且有能力動態地改變它們而不用擔心其他事情是非常有用的。

來源

2013-05-25 23:14:20 Giedrius

observableArray中的可觀察對象不會自動更新

回答

相關問題