KnockoutJS模板'beforeRemove'调用了3次而不是1次 [英] KnockoutJS template 'beforeRemove' called three times instead of 1

问题描述

我的KnockoutJS模板如下所示:

My KnockoutJS template looks as follows:

       <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函数三次.

When I'm removing a object from the cars() observableArray I want to hide() and remove() the element which is being removed. Except when removing a element the beforeRemove function is called three times with three different elements as parameter.

这三个要素是:

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

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

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

afterAdd的行为方式相同.这是一个错误，还是我对该功能的理解不正确?

The afterAdd behaves the same way.. Is this a bug, or is my understanding of the function incorrect?

感谢您的时间！

推荐答案

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

I believe that's the expected behavior if your template contains those elements.

如果您只想隐藏/显示特定元素-例如< div>元素-您需要做一个jQuery选择器来过滤掉元素:

If you only want to hide/show particular elements -- say, <div> elements -- you'll want to do a jQuery selector to filter the elements down:

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

相关:我不建议将大型javascript函数放到HTML内.它使HTML混乱，并混合了对视图和视图逻辑的关注.相反，我会做这样的事情:

Related: I don't recommend putting big javascript functions right inside your HTML. It clutters the HTML and mixes concern of view and view logic. I'd instead do something like this:

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

这篇关于KnockoutJS模板'beforeRemove'调用了3次而不是1次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！