jQuery select 在 Meteor 1.1.0.2 onRendered 中不工作

Question

我正在开发我已部署的应用程序，并尝试将所有内容升级到最新版本并更新代码以利用最新流程，例如在 Template.onRendered 中订阅，但我有好像坏了我的排序。

我的模板（稍微简化了）

<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():

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') 似乎都 return 没有结果。似乎 DOM 实际上并不存在。我认为对所有订阅的 .ready() 调用会纠正这一点，但认为存在时间问题，Blaze 尚未修复 DOM，但订阅确实已完成。我这样说是因为我在 if 的第一行 Chrome 中放置了一个断点，并且浏览器仍然显示 "Loading...".

我还尝试通过在 {{#with}} 块的末尾设置 sortable 的助手来热连线，希望它可能会最后呈现，但这也没有用.

我在Meteor论坛上找了一些文章，好像是建议加个定时器，不过这个好像很"hackish"。运行 JS 是否有新模式需要 DOM 完全初始化？

Answer 1

我建议您使用 Tracker.afterFlush() 来保证 DOM 已创建和更新，而不是时间延迟 hack。这是来自 Meteor docs 的描述：

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 语句中，你可以像这样包装代码块

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

Here 是使用 Tracker.afterFlush.

示例的参考

jQuery select 在 Meteor 1.1.0.2 onRendered 中不工作

jQuery select not working in Meteor 1.1.0.2 onRendered

meteor

meteor-blaze