为什么afterRender从未调用？ [英] Why is afterRender never called?
问题描述
foreach 绑定和一个按钮添加一个新项目到 observableArray 。该添加工作正常，新项目出现。但是， afterRender 方法永远不会被调用 - 不是在初始绑定之后，而是在添加（并渲染）新项之后。为什么？ 小提琴： http： /jsfiddle.net/CQNm6
HTML
< html lang =enxmlns =http://www.w3.org/1999/xhtml>
< head>
< meta charset =utf-8/>
< title>< / title>
< script type =text / javascriptsrc =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'）}）;>添加新事物< / a>
< script type =text / javascript>
var Thing =（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）
]）
};
函数afterRenderTest（elements）
{
alert（Rendered+ elements.length +elements。
}
ko.applyBindings（）;
< / script>
< / body>
< / html>
您的语法错误，因为 foreach 绑定取数组或对象，您可以在其中指定附加事件，参数。
传递数组你希望迭代。绑定将为每个条目输出
a部分的标记。
或者，传递一个名为
$ code的属性的JavaScript对象文字> data 这是你想迭代的数组。对象文字
也可能有其他属性，例如afterAdd或includeDestroyed...
所以你需要写：
; div data-bind =foreach：{data：data.things，afterRender：afterRenderTest}>
< h1 data-bind =text：name>< / h1>
< / div>
演示 JSFiddle。
Have a look at the following sample HTML. It is a simple KO foreach binding and a button to add a new item to the observableArray. The addition works fine and the new item shows up. However, the afterRender method is never called - not after the initial binding and not after a new item is added (and rendered). 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>
Your syntax is wrong because foreach binding either take an array or an object where you specify the additional events, arguments.
From the documentaiton:
Pass the array that you wish to iterate over. The binding will output a section of markup for each entry.
Alternatively, pass a JavaScript object literal with a property called
datawhich is the array you wish to iterate over. The object literal may also have other properties, such asafterAddorincludeDestroyed...
So you need write:
<div data-bind="foreach: { data: data.things, afterRender: afterRenderTest }">
<h1 data-bind="text: name"></h1>
</div>
Demo JSFiddle.
这篇关于为什么afterRender从未调用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
