jQuery select在Meteor 1.1.0.2 onRendered中不起作用 [英] jQuery select not working in Meteor 1.1.0.2 onRendered

问题描述

我正在开发一个已部署的应用程序，并试图将所有内容都更新到最新版本并更新代码以利用最新的流程，例如在Template.onRendered中进行订阅，但是我似乎破坏了我的可分项

I am working on an app I had deployed, and trying to get everything up to the latest version and update the code to take advantage of the latest processes, like subscribing in the Template.onRendered, but I have seemingly broken my sortable.

我的模板(有所简化)

<template name="formEdit">
  <div id="formContainer">
    {{#if Template.subscriptionsReady}}
      {{#with form this}}
        <table id="headerFieldsTable" class="table">
          <tbody id="headerFields">
            {{#each headerFields}}
              <tr class="headerFieldRow">
                <td>{{> headerFieldViewRow }}</td>
              </tr>
            {{/each}}
          </tbody>
        </table>

        <h5>Form Fields</h5>
        <table id="formFieldsTable" class="table">
          <tbody id="formFields">
            {{#each formFields}}
              <tr class="formFieldRow">
                <td>{{> formFieldViewRow }}</td>
              </tr>
            {{/each}}
          </tbody>
        </table>

      {{/with}}
    {{else}}
      Loading...
    {{/if}}
  </div>
</template>

模板的onRendered():

And the template's onRendered():

Template.formEdit.onRendered(function() {
  var formsSubscription = this.subscribe('formById', this.data);
  var headerFieldsSubscription = this.subscribe('headerFieldsForForm', this.data);
  var formFieldsSubscription = this.subscribe('formFieldsForForm', this.data);

  var formEditTemplate = this;
  this.autorun(function() {
    if (formsSubscription.ready() && headerFieldsSubscription.ready() && formFieldsSubscription.ready()) {
formEditTemplate.$(''));
      formEditTemplate.$('#headerFields').sortable({
        axis: "y",
        stop: function(event, ui) {
          var headersToSave = [];
          $('#headerFieldsTable div.headerField').each(function(idx, headerFieldDiv) {
            var header = Blaze.getData(headerFieldDiv);
            header.sequence = idx;
            headersToSave.push(header);
          });
          _.each(headersToSave, function(header) { header.save(); });
        }
      });

      formEditTemplate.$('#formFields').sortable({
        axis: "y",
        stop: function(event, ui) {
          var feildsToSave = [];
          $('#formFieldsTable div.formField').each(function(idx, formFieldDiv) {
            var field = Blaze.getData(formFieldDiv);
            field.sequence = idx;
            feildsToSave.push(field);
          });
          _.each(feildsToSave, function(field) { field.save(); });
        }
      });
    }
  });
});

但是对于页眉和页脚，formEditTemplate.$('#headerFields')和formEditTemplate.$('#formFields')似乎均未返回任何结果.似乎DOM实际上并不存在.我认为对所有订阅的.ready()调用都可以解决此问题，但是认为存在一个时序问题，即Blaze尚未修复DOM，但是订阅确实完成了.我之所以这样说，是因为我在if的第一行上在Chrome中设置了一个断点，而浏览器仍在显示正在加载...".

But for both the headers and footers, the formEditTemplate.$('#headerFields') and formEditTemplate.$('#formFields') both seem to return no results. It seems like the DOM is not actually present. I thought the .ready() call on all the subscriptions would correct that, but think there is a timing issue where Blaze hasn't fixed up the DOM yet, but the subscriptions are indeed done. I say this because I put a breakpoint in Chrome right at the first line of the if, and the browser was still showing "Loading...".

我还尝试通过在{{#with}}块的末尾设置一个可排序对象的助手来热线连接东西，希望它可能会在最后呈现，但那也不起作用.

I also attempted to hot-wire things by having a helper that setup the sortable placed at the end of the {{#with}} block, hoping that maybe it would be rendered last, but that didn't work either.

我在Meteor论坛上找到了一些建议添加计时器的文章，但这似乎很骇人".是否有运行JS的新模式，要求DOM完全初始化?

I found some articles on the Meteor forums that seemed to suggest adding a timer, but this seems very "hackish". Is there a new pattern for running JS that requires the DOM to be fully initialized?

推荐答案

我建议您使用Tracker.afterFlush()来确保已创建和更新DOM，而不是使用时间延迟破解.这是来自流星文档的描述:

Instead of the time delay hack, I recommend you use Tracker.afterFlush() to guarantee that the DOM has been created and updated. Here is a description from Meteor docs:

计划在下一次刷新或稍后刷新时调用的函数 当前的刷新(如果正在进行)，则全部无效 计算已重新运行.该功能将运行一次，而不是 后续的刷新，除非再次调用afterFlush.

Schedules a function to be called during the next flush, or later in the current flush if one is in progress, after all invalidated computations have been rerun. The function will be run once and not on subsequent flushes unless afterFlush is called again.

因此，在您的if语句中，您可以像这样包装代码块

So inside of your if statement, you can wrap the code block like so

if (formsSubscription.ready() && headerFieldsSubscription.ready() && formFieldsSubscription.ready()) {
  Tracker.afterFlush( function () {
    //Code block to be executed after subscriptions ready AND DOM updated
  });
}

此处是使用Tracker.afterFlush的示例的参考.

Here is a reference with examples using Tracker.afterFlush.

这篇关于jQuery select在Meteor 1.1.0.2 onRendered中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！