javascript - KnockoutJS 模板 'beforeRemove' 调用了 3 次而不是 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>

当我从 cars() observableArray 中移除一个对象时，我想 hide() 和 remove() 被移除的元素。除了删除元素时，beforeRemove 函数被调用三次，并使用三个不同的元素作为参数。

三个要素是:

1. Comment { data=" Block 1 ", length=9, nodeName="#comment", meer...}尝试删除..

2. <TextNode textContent=" ">尝试删除..

3. <div class="block">尝试删除..

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

感谢您的宝贵时间!

Answer 1

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

如果您只想隐藏/显示特定元素——例如，

元素——您需要使用 jQuery 选择器来过滤元素:

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

相关:我不建议将大型 javascript 函数直接放在 HTML 中。它使 HTML 困惑，并混合了对 View 和 View 逻辑的关注。相反，我会做这样的事情:

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

关于javascript - KnockoutJS 模板 'beforeRemove' 调用了 3 次而不是 1 次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7662781/