Geek asks and answers

Why did afterRender never call?

Have a look at the following HTML example. This is a simple KO binding foreachand a button to add a new item to observableArray. Adding works fine and a new item appears. However, the method is afterRendernever called - not after the initial binding, and not after adding (and rendering) a new element. Why?

Fiddle: 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>
+5
source share
1 answer

Your syntax is incorrect because the binding foreacheither takes an array or an object where you specify additional events, arguments.

From documentaiton:

, . .

, JavaScript data, , . , afterAdd includeDestroyed...

, :

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

JSFiddle.

+12

More articles:


All Articles