2014-03-19 83 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

相关问题