Question

我的模板和代码非常简单实用，但我想以更加理智的方式做到这一点：

<body>{{> tpl}}</body>
<template name="tpl">
    <div id=elements>
        {{#each documents}}
            {{element}}
        {{/each}}
    </div>
</template>

// documents look like { css: { color: "red" }, text: "foo" }
Template.tpl.documents = function () { return documents.find({}); };
Template.tpl.element = function () {
    setTimeout(function () {
        $("<div>", this).appendTo("#elements");
    }.bind(this), 10);
}

如您所见，这将使用来自JavaScript对象的jQuery创建一个元素，其中的属性已存储在数据库中。这对我来说是最方便的方式，我宁愿不改变它。

我的主要问题是setTimeout的使用，因为最初调用#elements时，DOM中tpl.elements元素显然不存在。相反，似乎我应该返回要追加的元素，但我不知道该怎么做。

次要的，我认为使用jQuery追加元素是不正确的。我还通过服务器上的.allow对文档进行了一些验证，每次插入尝试时都会运行tpl.element，即使它不成功。我可以通过使用.find().fetch()解决这个问题，但是当插入尝试时它似乎必须重新评估整个文档，这会导致闪烁。

使用属性对象添加元素的正确方法是什么？

Answer 1

你认为这不是流星般的方式。一般来说，你编写的jQuery越多，你正确使用框架的可能性就越小。

答案是添加更多模板。模板是你的朋友 - 到处使用它们。另外，尝试使用比document和element更具体的内容。这些在变量名称的上下文之外具有特定含义。

<template name="posts">
  <div class="posts">
    {{#each posts}}
      {{> post}}
    {{/each}}
  </div>
</template>

<template name="post">
  <p class="message">{{message}}</p>
</template>

返回posts的文档数组将导致每次发布更改时都会呈现所有子模板。但是，如果posts是游标，则渲染引擎可以在更改时有选择地重绘单个帖子。这就是为什么在模板助手中使用find代替fetch通常会更好。

更新回答

Meteor根本就不是为了做到这一点。如果你不使用模板来反应性地呈现你的数据，你将会有一个非常很难做出这样的工作。我能给出的最接近的建议是查看rendered回调。每次你的模板想要重绘自己时都会触发，你可以在那里手动放置任何jQuery代码。正如您已经发现的那样，问题是rendered可能会在您的订阅准备就绪之前触发......然后您将使用计时器并希望您的所有数据都存在并且不会更改。简而言之，这是一个巨大的混乱。

以流行的方式将文档显示为元素

1 个答案:

更新回答