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

我还尝试通过设置放置在{{#with}} 块末尾的可排序的助手来进行热线处理，希望它可能会最后呈现，但这也不起作用。

我在 Meteor 论坛上发现了一些似乎建议添加计时器的文章，但这似乎非常“骇人听闻”。是否有新的运行 JS 的模式需要完全初始化 DOM？

Answer 1

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

安排一个函数在下一次刷新期间调用，或者稍后在 当前刷新（如果正在进行），毕竟无效 计算已重新运行。该功能将运行一次而不是 除非再次调用 afterFlush，否则后续刷新。

所以在你的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 的示例参考。