KnockoutJS在空白元素上调用afterAdd函数

Question

一般来说,我是KnockoutJS中模板数据绑定的afterAdd属性的忠实粉丝.但是,我发现我的afterAdd回调总是被击中3次,我不知道为什么.我做错了什么吗？

回调的工作方式如下:

• 调用1:textnode
• 调用2:我关心的实际元素
• 调用3:textnode

为了应对,我的所有处理程序最终都检查了isElementContentWhitespace,如下所示:

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 当前被称为Knockout在模板中找到的foreach节点.

如果您不想检查nodeType,则可以删除模板中的空格,如:

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

使用此模板,您将只看到元素afterAdd上的调用li.