2013-01-20 173 views
2

我有一个表更新与我的模型中的每个条目和两个事件触发删除和添加到数组。 hideElement调用jquery“fadeOut”,showElement调用jquery“fadeIn”函数创建漂亮的淡出/淡入效果。Knockoutjs与mapping.fromJS和模板

<tbody data-bind='template: { foreach: entries, 
    beforeRemove: hideElement, 
    afterAdd: showElement }'> 

我的模式是这样的:

var Model = function() { 
self.entries = ko.mapping.fromJS([]); 
this.getData = function() { 
$.ajax({ 
    url: "/test", 
    type: "GET", 
    success: function(response) { 
     ko.mapping.fromJS(response, self.entries); 
... 

this.showElement = function(elem) { 
    if(elem.nodeName == "TR") { 
     $(elem).fadeIn(500); 
    } 
}; 

this.hideElement = function(elem) { 
    if(elem.nodeName == "TR") { 
     $(elem).fadeOut(500); 
    }; 
}; 
... 

的问题是,每个ko.mapping.fromJS(response, self.entries)被称为好像淘汰赛被删除/添加条目Ajax响应时间,即使他们是完全相同。因为showElement/hideElement被调用,并且我的表中的元素“闪烁”,因为它们被删除/添加每个ajax调用。

这是假设是这样还是我用错了?

+0

如何你'entries'集合中的项目的样子一样吗?他们有一些独特的标识符,像一个ID? – nemesv

+0

是的,他们有来自mysql数据库的id。该ID是主键。 – nergal

+0

您需要使用映射pugin中的密钥选项,以便插件知道哪些项目相同 – Anders

回答

2

您需要使用密钥选项在映射插件,以便插件知道哪些项目是

http://jsfiddle.net/yWwfz/

var mapping = { 
    items: { 
     key: function(item) { return item.id; } 
    } 
}; 
ko.mapping.fromJS(data, mapping, this); 
+0

是的,我是这样做的,它基于上面的评论。谢谢。 '\t ko.mapping.fromJS(响应,{ \t \t \t键:功能(数据){ \t \t \t返回ko.utils.unwrapObservable(data.id); \t \t \t}},self.entries );' – nergal

+0

虽然如果你想确保你从服务器上拉出了一个全新的项目列表....那么确保KO完全删除并重新添加所有项目会不会更好? (最好不要告诉KO关键是什么?) – ClearCloud8