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。

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

1 个答案: