6

查看以下示例 HTML。它是一个简单的 KOforeach绑定和一个用于将新项目添加到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>
4

1 回答 1

13

你的语法是错误的，因为foreach 绑定要么接受一个数组，要么接受一个你指定附加事件、参数的对象。

从文档中：

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

或者，传递一个带有属性的 JavaScript 对象字面 量，该属性data是您希望迭代的数组。对象字面量也可能具有其他属性，例如afterAdd或includeDestroyed...

所以你需要写：

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

演示JSFiddle。

于 2013-04-16T20:00:16.057 回答