jquery – 成功回调后knockout.js完成渲染所有的元素

我已经实现了一个knockout foreach绑定，在同一页面中的多个模板，其中一个示例在这里，我感兴趣的是找出一个块完成渲染，我试过afterRender和afterAdd，但我想它运行对于每个元素，而不是在整个循环完成后。

<ul data-bind="foreach: {data: Contacts,afterAdd: myPostProcessingLogic}">
            <li>
              <div class="list_container gray_bg mrgT3px">
              <div class="list_contact_icon"></div>
              <div class="contact_name"><span data-bind="text: first_name"></span> <span data-bind="text: last_name"></span></div>
              <div class="contact_number"><span data-bind="text: value"></span></div>
              <div class="callsms_container"> <a href="#notification-Box" class="notifcation-window">
                <div class="hover_btn tooltip_call">
                  <div class="hover_call_icon"></div>
                  <span>Call</span></div>
                </a> <a class="sendsms" href="#sendsms" rel="#sendsms">
                <div class="hover_btn tooltip_sms">
                  <div class="hover_sms_icon"></div>
                  <span>SMS</span></div>
                </a> <a href="#">
                <div class="hover_more_btn"></div>
                </a> </div>
              <!-- close callsms container -->
              <div id="notification-Box" class="notification-popup"> <a href="#" class="close"><img class="btn_close" src="images/Box_cross.png"/></a> <img class="centeralign" src="images/notification_call.png"/> <span>Calling... +44 7401 287366</span> </div>
              <!-- close notification Box --> 
              <!-- close list gray bg -->
              <div class="tooltip_description" style="display:none" id="disp"> asdsadaasdsad </div>
              </div>
            </li>
 
          </ul>

我有兴趣找到只是成功回调，当一个循环完成渲染。

这里是我的afterAdd函数，它基本上附加一些jquery事件，没有什么。

myPostProcessingLogic = function(elements) { 
$(function(){
    $(".list_container_callog").hover(function(){   
        $(".callsms_container",this).stop().animate({left:"0px"},{queue:false,duration:800});
    },function() {
        $(".callsms_container",this).stop().animate({left:"-98%"},duration:800});
 
    });
});
}

感谢提前，告诉我有一个成功回调:)

解决方法

你在knockout.js中有afterRender回调函数：

foreach: { data: myItems,afterRender: renderedHandler }

Here’s documentation.

在处理程序内部检查呈现的集合的长度是否等于items集合的长度。如果不是不执行你想要使用的完整呈现的逻辑。

renderedHandler: function (elements,data) {
    if ($('#containerId').children().length === this.myItems().length) {
        // Only now execute handler
    }
}

jquery – 成功回调后knockout.js完成渲染所有的元素

解决方法

猜你在找的jQuery相关文章