带有铁路由器的流星数据上下文

Question

我是 Meteor 的新手，我正在尝试在显示一个段落的页面中设置数据上下文。我需要访问passage_item.js Template.passageItem.rendered 中的数据，但此时没有设置上下文。我想我需要类似 {{#withpassage}} 的东西，但 one_passage.html 中不存在“passage”。

这里有一些代码 sn-ps。谢谢。

路由器.js

Router.map(function() {
    this.route('passagesList', {path: '/'});
    this.route('onePassage', { 
    path: '/passages/:_id',
    data: function() { return Passages.findOne(this.params._id); }
    });
});

one_passage.html

<template name="onePassage">
    {{> passageItem}}
</template>

passage-item.html

<template name="passageItem">
  <div class="passage">
    <div class="one-passage">
      <h4><a href= "{{pathFor 'onePassage'}}">{{title}}</a></h4>
     <div class="passage-content">
    {{content}}
     </div>
   </div>
 </div>

passage_item.js

Template.passageItem.helpers({
});

Template.passageItem.rendered = function() {
    Meteor.defer(function() {
    $('.passage-content').lettering('words');
   //I want to be able to access the data object here. I have a list of words that are highlighted
    });
};

Answer 1

从 Meteor 1.0.3.1 开始，新的 Iron Router 数据选择器似乎是...

Template.TemplateName.rendered = function() {
  console.log(UI.getData());
};

Answer 2

收藏

假设您像这样创建了 Passages 集合，并且您已启用自动发布（默认情况下）：

Passages = new Meteor.Collection('passages');

路由器地图

然后你像这样映射你的路由器：

Router.map(function() {
    this.route('onePassage', { 
        path: '/passages/:_id',
        template: 'passageItem' // <-- to be explicit
        data: function() {
            return Passages.findOne(this.params._id);
        }
    });
});

模板

您的模板如下所示：

<template name="passageItem">
    <div class="passage">
        <div class="one-passage">
            <h4><a href= "{{pathFor 'onePassage'}}">{{title}}</a></h4>
            <div class="passage-content">
                {{content}}
            </div>
        </div>
    </div>
</template>

模板中“this”的范围将设置为 Passages.findOne 选择器返回的文档。

如果模板未呈现，则意味着您正在搜索不存在的段落，或者您的段落缺少标题或内容字段。

渲染函数

现在是您问题的最后一部分。渲染函数中“this”的范围设置为模板实例。因此，如果您需要访问模板数据，请尝试以下操作：

Template.passageItem.rendered = function() {
    console.log(this.data); // you should see your passage object in the console
};

Answer 3

我假设一个段落由 {'title':'', 'content':''}

那么这应该可以工作：

在 router.js 中

Router.map(function() {
  this.route('passagesList', {path: '/'});
  this.route('onePassage', { 
    path: '/passages/:_id',
    data: {
      passage: function() { return Passages.findOne(this.params._id); }
    }
  });
});

在passage-item.html中：

<template name="passageItem">
{{#each passage}}
  <div class="passage">
    <div class="one-passage">
      <h4><a href= "{{pathFor 'onePassage'}}">{{title}}</a></h4>
        <div class="passage-content">
        {{content}}
        </div>
    </div>
  </div>
{{/each}}
</template>