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属性有助于跟踪对象数组的更改

afterAdd绑定不起作用

1 个答案: