knockout.js完成呈现所有元素后成功回调

时间：2013-01-10 09:15:37

标签： jquery foreach knockout.js

我已经实现了一个淘汰的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%"},{queue:false,duration:800});
      });
  });
}

提前感谢，并告诉我回调成功：）

8 个答案:

答案 0 :(得分：66)

afterRender中有knockout.js回调：

foreach: { data: myItems, afterRender: renderedHandler }

Here's documentation.

在处理程序内部检查渲染集合的长度是否等于items集合的长度。如果没有，请不要执行您打算使用的完整渲染逻辑。

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

答案 1 :(得分：9)

尝试使用

包装ul 
<div data-bind='template: {afterRender: myPostProcessingLogic }'>

它只会在第一次渲染模板中的所有内容时起作用。但是你只能调用myPostProcessingLogic。这是一个fiddle 

<div data-bind='template: {afterRender: myPostProcessingLogic }'>
  <ul data-bind="foreach: Contacts">
    <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>
</div>

答案 2 :(得分：4)

使用Knockout的容器减去方法将foreach包装到另一个foreach循环中：

<!-- ko foreach:{data: Contacts, afterRender: myPostProcessingLogic }-->
<ul data-bind="foreach: $data}">
  <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>
<!-- /ko -->

答案 3 :(得分：3)

Chuck Schneider上面的答案是最好的。 我不得不使用无容器控制，因为foreach在tbody元素上：

<!-- ko template: {afterRender: SetupCheckboxes } -->
<tbody data-bind="foreach: selectedItems" id="gridBody">
  <tr>
    <td>
      <input type="checkbox" />
    </td>
  </tr>
</tbody>
<!-- /ko -->

答案 4 :(得分：1)

上述解决方案效果很好。此外，如果您需要使用foreach“as”选项，您可以这样做：

data-bind="foreach: { data: myItems, afterRender: renderedHandlet, as: 'myItem'}">

答案 5 :(得分：0)

我最近刚刚发布了一个带有knockout的pull请求，要求他们在绑定中添加两个事件来定义，解包，然后在渲染项目之前调用正确的点，并在渲染完所有项目之后调用。我没有从他们那里听到任何回复，但这确实是你想做的事情，但是你不必编写hacky代码来让它工作。我很惊讶以前没有人提出这个要求。我使用了我添加到源代码中的这些回调来销毁并重新初始化一个基于敲除的jquery数据表。这是最简单的解决方案。我已经看到许多在线尝试以不同的方式尝试，但这是最简单的解决方案。

拉取请求： - ＆gt; pr 1856 

ko.bindingHandlers.DataTablesForEach = {

  init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    var nodes = Array.prototype.slice.call(element.childNodes, 0);
    ko.utils.arrayForEach(nodes, function(node) {
      if (node && node.nodeType !== 1) {
        node.parentNode.removeChild(node);
      }
    });
    return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
  },
  update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

    var value = ko.unwrap(valueAccessor()),
      key = "DataTablesForEach_Initialized";

    var newValue = function() {
      return {
        data: value.data || value,
        beforeRenderAll: function(el, index, data) {

          if (ko.utils.domData.get(element, key)) {

            $(element).closest('table').DataTable().destroy();
          }
        },
        afterRenderAll: function(el, index, data) {
          $(element).closest('table').DataTable(value.options);
        }
      };
    };

    ko.bindingHandlers.foreach.update(element, newValue, allBindingsAccessor, viewModel, bindingContext);

    //if we have not previously marked this as initialized and there is currently items in the array, then cache on the element that it has been initialized
    if (!ko.utils.domData.get(element, key) && (value.data || value.length)) {
      ko.utils.domData.set(element, key, true);
    }

    return {
      controlsDescendantBindings: true
    };
  }
};

Knockout Datatables JSFiddle

答案 6 :(得分：0)

在knockout.js中尝试afterRenderAll回调：

  

foreach：{data：myItems，afterRenderAll：myPostProcessingLogic}

答案 7 :(得分：0)

在版本3.5中，Knockout提供事件以通知何时绑定了节点的内容

HTML 

<div data-bind="childrenComplete: bindingComplete">...</div>

JavaScript 

function bindingComplete(){
...
}

如果您在DOM中的某个点创建了一个创建事件绑定表达式，该表达式封装了所有子数据绑定表达式，那么就等于页面绑定完成事件

参考 https://knockoutjs.com/documentation/binding-lifecycle-events.html

相关问题
最新问题