2014-03-19 123 views
1

我是Knockout的新手,我的要求是,每當observable數組的對象屬性以編程方式更改其值時,UI應相應地更新。但它似乎並不適合我。Knockout JS。更新可觀察數組的對象

我知道,爲了使這個工作對象屬性需要是一個可觀察的本身。我正在使其可觀察,但不知何故它不更新UI。 我試圖在一個模型的正常領域相同,它的工作原理。

任何人都可以請建議我缺少什麼?

var appViewModel = function() { 
     this.firstName = ko.observable("Amit"); 
     this.Books = ko.observableArray(Books); 
     this.updateBook = function() { 
      this.Books()[0].Book = ko.observable(this.Books()[0].Book); 
      this.firstName("Goda"); 
      this.Books()[0].Book("Harry Potter and Prisoner of Azkaban"); 
     } 
    }; 

我有我的完整代碼here

回答

1

你正在努力使這本書觀察到你綁定的數據之後。

你想遞歸地使Books可觀察。這可以通過mapping plugin來完成:

this.Books = ko.mapping.fromJS(Books); 

這樣,你可以簡單地做updateBook如下:

this.firstName("Goda"); 
this.Books()[0].Book("Harry Potter and Prisoner of Azkaban"); 

參見:http://jsfiddle.net/jVQY8/1/

編輯:

要恢復您可以簡單的更改跟蹤原始數據:

var initialData = Books; 

然後再使用映射插件恢復的變更:

self.revert = function() { 
    ko.mapping.fromJS(initialData, self.Books); 
}; 

參見:http://jsfiddle.net/jVQY8/2/

對於更先進的解決方案,你可以提交/重置價值,看到下面的帖子: http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html

+0

棒極了!這就像一個魅力。這是我正在尋找的。並且非常感謝我指向映射插件。我的意圖是使每個財產都可觀察。我還有一個問題,我想爲所有作者屬性訂閱beforChange事件,因此當它發生更改時,我可以將舊值存儲在臨時數組中,並且如果用戶在我的UI中單擊「還原」按鈕,我會調用一個函數迭代臨時數組並獲取該行的舊值並相應地更新UI。 – Amit

+0

我在我的答案中添加了一個示例。 – sroes

+0

你的例子看起來很乾淨。我已經閱讀了您建議的鏈接。實際上,在我的用戶界面中,每行都會有一個恢復按鈕,用戶可以點擊特定的按鈕來恢復該行。但是您提供的示例以及鏈接中提供的代碼會使用以前的數據重新加載整個模型,這就是我考慮使用臨時數組來跟蹤每行的更改並且UI尊重這一點的地方。但我被卡住了。 – Amit

相關問題