Question

내 모델의 각 항목이 업데이트 된 테이블을 가져 왔으며 어레이 제거 및 추가시 두 가지 이벤트가 발생했습니다. hideElement는 jquery "fadeOut"을 호출하고 showElement는 jquery "fadeIn"함수를 호출하여 멋진 페이드 아웃/페이드 인 효과를 만듭니다.

<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)이 항목을 추가/제거하는 녹아웃 것 같다 아약스 응답으로 호출 될 때마다 그들이 정확히 경우에도 것입니다 같은. 이 때문에 showElement/hideElement가 호출되고 각 테이블의 요소는 각 Ajax 호출을 제거/추가하기 때문에 "깜박임"합니다.

내가 이렇게 잘못 사용하고 있다고 생각합니까? 아니면 잘못 사용하고 있습니까?

Answer 1

당신은 항목이

http://jsfiddle.net/yWwfz/

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