afterAdd 绑定不起作用

Question

我尝试使用 afterAdd 绑定向添加到 observableArray 的元素添加一些简单的动画，但它不会触发任何内容。

我认为我的动画代码有问题，所以我在该函数上编写了一个小警报，但仍然不起作用。

以下是正在模板化的 div 的一些示例代码：

<div id="resultList" 
     data-bind='template: { name: "searchResultTemplate", 
                            afterAdd: function(elem){alert(elem)} }' 
     runat="server">
</div>

这是模板：

<script type="text/html" id="searchResultTemplate">{{each(i, searchresult) resultCollection()}}
<div class="searchresultwrapper ui-corner-all ui-state-default">
    <div class="searchresult">
        <img src='${ ImageUrl }' alt='${ Title }' title='${ Title }' class="searchresultpicture" />
        <div class="searchresultinformationcontainer">
            <span class="searchresulttitle" data-bind="text: Title"></span>
            <br />
            <div class="searchresultdescription" data-bind="text: Description">                   
            </div>
            <span class="searchresultAuthor" data-bind="text: AuthorName"></span> at <span class="searchresultmodule" data-bind="text: ModuleName"></span> on <span class="searchresultdate" data-bind="text: PublicationDate"></span>
            <br />
            <a href='${ Url }' class="searchresultlink">Take me there</a>
        </div>
    </div>
</div>
<br />{{/each}}
</script>

有什么想法吗？

Answer 1

您需要像这样使用 foreach 限定模板属性，

<div id="resultList" data-bind='template: { 
                           name: "searchResultTemplate", 
                           foreach: searchresult,
                           beforeRemove: function(elem) { $(elem).slideUp() },
                           afterAdd: function(elem) { $(elem).hide().slideDown() } 
                           }'  runat="server">
        </div>

然后不要在模板中使用 {{each ，只需为每个单独的项目进行模板化。

在这里，foreach 属性有助于跟踪对象数组的更改