knockout.js - KnockoutJS在空白元素上调用afterAdd函数

通常，我非常喜欢KnockoutJS中模板数据绑定(bind)的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>

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

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

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

最佳答案

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。

关于knockout.js - KnockoutJS在空白元素上调用afterAdd函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8263835/