KnockoutJS gọi hàm afterAdd trên các phần tử khoảng trắng

Question

Nói chung, tôi là một fan hâm mộ lớn của thuộc tính afterAdd của databinding mẫu trong KnockoutJS. Tuy nhiên, tôi thấy rằng callback afterAdd của tôi luôn luôn được nhấn 3 lần, và tôi không chắc tại sao. Tôi đang làm điều gì đó không chính xác?

Callback làm việc như thế này:

• Gọi 1: textnode
• Gọi 2: yếu tố thực tế tôi quan tâm đến
• Gọi 3: textnode

Để đối phó, tất cả các bộ xử lý của tôi cuối cùng có một kiểm tra cho isElementContentWhitespace như sau:

HTML

<ul class="t" data-bind="template: {name: 'itemTmplt', foreach: items, afterAdd: function(elem, idx, val) {my.ko.itemAdd(elem, idx, val);} }"> 
</ul> 
<script id="itemTmplt" type="text/html"> 
    <li class="tbl" data-bind="attr: {id: name}"> 
     <h3 data-bind="text: name"></h3> 
    </li> 
</script> 

JS

my.ns("mme.ko"); 
my.ko = (function() { 
    "use strict"; 

    return { 
     itemAdd: function (elem, idx, val) { 
      if (elem.isElementContentWhitespace) { return; } 

      /*** do stuff here ***/ 
     } 
    }; 
}()); 

Answer 1

afterAdd hiện được gọi là nút foreach rằng Knockout tìm thấy trong mẫu của bạn.

Nếu bạn không muốn để kiểm tra sự nodeType, sau đó bạn có thể dải khoảng trắng trong mẫu của bạn như:

<script id="itemTmplt" type="text/html"><li class="tbl" data-bind="attr: {id: name}"><h3 data-bind="text: name"></h3></li></script> 

Với mẫu này, bạn sẽ chỉ nhìn thấy afterAdd kêu gọi các yếu tố li.