Meteor Flow Router问题与更新

wiw*_*978 1 meteor

我有一个Meteor应用程序,我正在从IronRouter转换到FlowRouter.到目前为止一直很好,但有些方面我还不了解.

我的路线如下:

FlowRouter.route('/documents/:docId/edit', {
  name: 'documentEdit',
  subscriptions: function (params, queryParams) {
    this.register('documentEdit', Meteor.subscribe('documentSingle', params.docId));
  },
  action: function (params, queryParams) {
    BlazeLayout.render('layout', { top: 'header', main: 'documentEdit' });
  },    
});
Run Code Online (Sandbox Code Playgroud)

第一种选择:

然后我还有一个模板:

<template name="documentEdit">
  <div class="container">
    <h1>Edit document</h1>
    {{#if isReady 'documentEdit'}}
      {{#autoForm collection="Documents" doc=this id="documentForm" type="update" meteormethod="documentUpdateMethod"}}
        <fieldset>
          {{> afQuickField name='title'}}
          {{> afQuickField name='content' rows=6}}
        </fieldset>
        <button type="submit" class="btn btn-primary">Update</button>
        <a class="btn btn-link" role="button" href="{{pathFor 'documentsList'}}">Back</a>
      {{/autoForm}}
      {{/if}}
   </div>
</template>
Run Code Online (Sandbox Code Playgroud)

使用模板助手如下:

Template.documentEdit.helpers({
 isReady: function(sub) {
    if(sub) {
      return FlowRouter.subsReady(sub);
    } else {
      return FlowRouter.subsReady();
    }
  }
});
Run Code Online (Sandbox Code Playgroud)

这是在这里提到的,但我没有在UI上的文本框中预先填充值(这在编辑字段时是正常的).

第二种选择:

当我执行以下操作时,它可以工作,我不太明白为什么它可行(发现它在不同的论坛中浏览并尝试过):

<template name="documentEdit">
  <div class="container">
    <h1>Edit document</h1>
    {{#with getDocument }}
      {{#autoForm collection="Documents" doc=this id="documentForm" type="update" meteormethod="documentUpdateMethod"}}
        <fieldset>
          {{> afQuickField name='title'}}
          {{> afQuickField name='content' rows=6}}
        </fieldset>
        <button type="submit" class="btn btn-primary">Update</button>
        <a class="btn btn-link" role="button" href="{{pathFor 'documentsList'}}">Back</a>
      {{/autoForm}}
    {{/with}}
   </div>
</template>
Run Code Online (Sandbox Code Playgroud)

和助手:

Template.documentEdit.helpers({
 getDocument: function () {
    return Documents.findOne();
 }
});
Run Code Online (Sandbox Code Playgroud)

所以问题是:

  • 对于第一种选择:任何想法为什么它不起作用.我更喜欢那个,因为它是记录的做事方式
  • 对于第二个选项:不知道为什么我需要(在模板助手中)做一个Document.findOne()甚至不必传递我想编辑的文档的ID:

Dan*_*her 5

您希望使用Flow Router进行模板级订阅,这是主要模式更改之一.

所以你要这样做:

在模板级别设置订阅.自动运行以便重新订阅路线更改.

Template.documentEdit.onCreated(function() {
  var self = this;
  this.autorun(function() {
    var docId = FlowRouter.getParam('docId');
    self.subscribe('documentSingle', docId));
  };
};
Run Code Online (Sandbox Code Playgroud)

设置模板帮助程序以从路径中获取,并获取ID并填充帮助程序/文档.

Template.documentEdit.helpers({
  getDocument: function () {
    var docId = FlowRouter.getParam('docId');
    var doc = Documents.findOne(docId) || {};
    return doc;
  }
});
Run Code Online (Sandbox Code Playgroud)

进行模板级加载检查,如果有渲染,否则显示加载...

<template name="documentEdit">
  <div class="container">
    <h1>Edit document</h1>
    {{#if Template.subscriptionReady}}
      {{#with getDocument }}
        {{#autoForm collection="Documents" doc=this id="documentForm" type="update" meteormethod="documentUpdateMethod"}}
        <fieldset>
          {{> afQuickField name='title'}}
          {{> afQuickField name='content' rows=6}}
        </fieldset>
        <button type="submit" class="btn btn-primary">Update</button>
        <a class="btn btn-link" role="button" href="{{pathFor 'documentsList'}}">Back</a>
        {{/autoForm}}
      {{/with}}
    {{else}}
      Loading...
    {{/if}}
  </div>
</template>
Run Code Online (Sandbox Code Playgroud)