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

Question

一般来说，我非常喜欢 KnockoutJS 中模板数据绑定(bind)的 afterAdd 属性。但是，我发现我的 afterAdd 回调总是被命中 3 次，我不知道为什么。我做错了什么吗？

回调的工作方式如下:

调用 1:文本节点

调用2:我关心的实际元素

调用 3:文本节点

为了应对，我的所有处理程序最终都会检查 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元素。