Javascript KnockoutJS模板&x27；在移除之前'；打了三次电话，而不是一次

我的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>

当我从cars（）observearray中移除一个对象时，我想隐藏（）并移除（）正在移除的元素。除删除元素外，beforeRemove函数调用三次，并使用三个不同的元素作为参数

这三个要素是：

Comment{data=“Block 1”，length=9，nodeName=“#Comment”，meer…}

尝试删除

尝试删除

尝试删除

afterAdd的行为方式相同。。这是一个bug，还是我对函数的理解不正确

---

谢谢你的时间

如果您的模板包含这些元素，我相信这是预期的行为

如果您只想隐藏/显示特定的元素（例如，元素），那么您需要使用jQuery选择器来筛选这些元素：

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

相关：我不建议将大型javascript函数放在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>

var viewModel={
onRemovingCar:函数（元素）{
控制台日志（元素）；
log（'尝试删除..'）；
试一试{
jQuery（element.hide（）.remove（）；
}捕获（e）{
控制台日志（e）；
}
},
onAddedCar:函数（元素）{
log（'尝试添加..'）；
试一试{
jQuery（element.hide（）.fadeIn（）；
}捕获（e）{
控制台日志（e）；
}
}
};

Thx，我想用另一种（类似的）方法修复，但您的anwser是一个不错的选择！另外，模板html的“反javascript”部分也是一个很好的观点！