KnockoutJS 템플릿 'beforeRemove가'라고 세 번 대신 1

Question

다음과 같이 내 KnockoutJS 템플릿은 같습니다

나는 (차에서 개체를 제거하고 있습니다

 <div id="wrapper" data-bind="template: { 
               name:'theTemplate', 
               foreach: cars(), 

               beforeRemove: function(elem) { 
                console.log(elem);          
                console.log('try removing..'); 
                try { 
                 jQuery(elem).hide().remove(); 
                } catch (e) { 
                 console.log(e); 
                } 
               }, 

               afterAdd: function(elem) { 
                console.log('try adding..'); 
                try { 
                 jQuery(elem).hide().fadeIn(); 
                } catch (e) { 
                 console.log(e); 
                } 
               } 
              }"></div> 

가) 내가 (숨길)와 (제거 할 observableArray) 제거되고있는 요소. 요소를 제거 할 때를 제외하고 beforeRemove 함수는 세 개의 다른 요소를 매개 변수로 사용하여 세 번 호출됩니다.

세 요소는 다음

1. Comment { data=" Block 1 ", length=9, nodeName="#comment", meer...} 제거하려고 ..

2. <TextNode textContent=" "> .. 제거하려고

3. <div class="block"> .. 제거하려고

,

afterAdd는 동일한 방식으로 작동합니다. 버그입니까? 또는 함수에 대한 잘못된 이해입니까?

시간 내 주셔서 감사합니다.

Answer 1

템플릿에 해당 요소가 포함되어 있으면 예상되는 동작입니다. 말하자면, <DIV> 요소 - -

만/숨기기 특정 요소를 표시 할 경우

당신이 요소를 필터링 할 jQuery를 선택을 할 수 있습니다 :

afterAdd: function(elem) { 
    console.log('try adding..'); 
    try { 
     jQuery(elem).filter("div").hide().fadeIn(); 
    } catch (e) { 
     console.log(e); 
    } 
} 

관련을 : 나는 돈 HTML 안에 큰 자바 스크립트 기능을 넣는 것이 좋습니다. HTML을 혼란스럽게하고보기 및보기 논리에 대한 관심을 섞습니다. 대신 다음과 같은 작업을 수행 할 것입니다.

<div id="wrapper" data-bind="template: { 
    name:'theTemplate', 
    foreach: cars, 
    beforeRemove: onRemovingCar, 
    afterAdd: onAddedCar 
}"></div> 

<script type="text/javascript"> 

    var viewModel = { 
    onRemovingCar: function(element) { 
      console.log(element);          
      console.log('try removing..'); 
      try { 
       jQuery(element).hide().remove(); 
      } catch (e) { 
       console.log(e); 
      } 
     }, 
     onAddedCar: function(element) { 
      console.log('try adding..'); 
      try { 
       jQuery(element).hide().fadeIn(); 
      } catch (e) { 
       console.log(e); 
      } 
     } 
    }; 

</script>