如何正确使流星模板具有反应性?

时间:2013-06-20 21:44:35

标签: javascript meteor meteor-blaze

我的应用程序显示了一组项目,我想添加项目向下钻取视图。

我只能使解决方案的一半工作;我找到了相应的文档并使用该文档来呈现模板:

var item = Items.findOne('my_id');

$('#main').html(
    Meteor.render(function () {
        return Templates.item(item)
    }));

这会成功呈现单个项目并绑定相应的事件。

这是摩擦,模板不是被动的!如果我使用关联的事件处理程序或从控制台更改其数据,则不会更新模板。但是,页面刷新将显示更新的数据。

我是流星noobie,所以它可能非常简单。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:4)

在我看来,你并没有像他们真正想要的那样使用模板。

流星应用程序以主html标记开始,该标记只能在您的应用程序中存在一次..

<head>
  <title>My New Fancy App</title>
</head>
<body>
  {{>templateName}}
</body>

然后你添加一个模板..

<template name="templateName">
  {{#each items}}
    template or relevant html goes here..
  {{/each}}
</template>

现在你需要一个模板帮助器来为你的{{#each items}}块助手提供数据..

Template.templateName.helpers({
  items: function(){ return Items.find({}) }
});

所有这些都在客户端定义..

然后你需要一个集合,并且应该在客户端和服务器上定义集合。

Items = new Meteor.Collection('items');

只要您的收藏中有记录,现在就可以使用。

由于您只希望渲染单个文档,因此您可以稍微更改帮助程序和模板。

首先帮手变成:

Template.templateName.helpers({
  item: function(){ return Items.findOne() }
});

然后模板可以通过文档引用返回文档的值,因此我们将模板更改为:

<template name="templateName">
  {{item.propertyName}}
</template>