Question

查看以下示例HTML。它是一个简单的KO foreach绑定和一个向observableArray添加新项目的按钮。添加工作正常，新项目出现。但是，永远不会调用afterRender方法 - 不是在初始绑定之后，也不是在添加（和呈现）新项之后。为什么呢？

小提琴： http://jsfiddle.net/CQNm6

HTML

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
    </head>
    <body>
        <div data-bind="foreach: data.things, afterRender: afterRenderTest">
            <h1 data-bind="text: name"></h1>
        </div>
        <a href="JavaScript:void(0);" onclick="data.things.push({ name: ko.observable('New Thing') });">Add New Thing</a>

        <script type="text/javascript">
            var Thing = (function ()
            {
                function Thing(p_name)
                {
                    this.name = ko.observable(p_name);
                }

                return Thing;
            })();
            var data =
            {
                things: ko.observableArray(
                [
                    new Thing("Thing One"),
                    new Thing("Thing Two"),
                    new Thing("Thing Three")
                ])
            };

            function afterRenderTest(elements)
            {
                alert("Rendered " + elements.length + " elements.");
            }

            ko.applyBindings();
        </script>
    </body>
</html>

Answer 1

您的语法错误，因为foreach绑定要么采用数组，要么指定其他事件，参数。

来自documentaiton:

传递您希望迭代的数组。绑定将输出   每个条目的标记部分。

或者，使用名为的属性传递JavaScript对象文字   data这是您希望迭代的数组。对象字面量   也可能有其他属性，例如afterAdd或includeDestroyed ...

所以你需要写：

<div data-bind="foreach: { data: data.things, afterRender: afterRenderTest }">
    <h1 data-bind="text: name"></h1>
</div>

演示JSFiddle.

为什么afterRender从未打过电话？

1 个答案: