0

因此，自从升级到 0.8.0 以来，我一直在尝试弄清楚如何在 Meteor 中使用渲染功能。Blaze 改变了渲染函数的行为，现在它只被调用一次。

在寻求帮助时，我找到了 2 个示例，这些示例解释了如何使用这种新方法获得旧功能。Meteorpedia，请查看标题为“使用外部脚本（例如 jQuery）的新呈现行为”的部分。Avital 的github 存储库展示了两种解决问题的新方法。

但是，这些都不适合我。我的问题是我没有使用 {{#each}} 块循环内容。我只需要在信息迭代时运行渲染。因此，每次将新项目添加到数据库时，都会调用上述示例。但这对我不起作用，因为我只需要在页面呈现后显示信息并运行一些 jquery 样式设置。

所有这一切，我发现如果我检查数据是否有内容，渲染的功能对我来说是正确的。如果有人想看看我做了什么，我有一个包含以下文件的仓库。

基本上下面发生的情况是，在 {{#each data}} 和 {{#if data}} 块中调用时，“justName”渲染函数中发生的操作会起作用，但如果两者都不使用，则发生得太快。这对于理解这一点的人来说可能是有意义的（我不知道），但它似乎确实可以发挥作用。

HTML

<template name="infoEach">
{{#each data}}
    <ul>
        <li class="name">{{> justName}}</li>
    </ul>
{{/each}}
</template>

<template name="infoIf">
{{#if data}}
    <ul>
        <li class="name">{{> justName}}</li>
    </ul>
{{/if}}
</template>

<template name="infoNothing">
<ul>
    <li class="name">{{> justName}}</li>
</ul>
</template>

<template name="justName">
    <span class="justName">{{name}}</span>
</template>

JS

// Collection
Items = new Meteor.Collection("items");

// Fixture
if (Items.find().count() === 0) {
    Items.insert({ name: "Matt" });
    Items.insert({ name: "Karen" });
}

// Info Each
Template.infoEach.helpers({
    data: function() { return Items.find(); }
});
Template.infoEach.rendered = function() {
    console.log(this.$(".name").text());
}

// Info If
Template.infoIf.helpers({
    data: function() { return Items.findOne({name: "Matt"}); }
});
Template.infoIf.rendered = function() {
    console.log(this.$(".name").text());
}

// Info Nothing
Template.infoNothing.helpers({
    data: function() { return Items.findOne({name: "Matt"}); }
});

Template.infoNothing.rendered = function() {
    console.log(this.$(".name").text());
}


// Just name
Template.justName.rendered = function() {
    var ran = Random.choice(["blue", "red", "orange"]);
    var txt = this.$(".justName").text();

    this.$(".justName").text(txt + " " + ran);
    this.$(".justName").addClass("added").css("color", ran);

    console.log(this.$(".justName").text());
}

有几点需要注意：

  1. 在这个例子中，“infoNothing”模板上的渲染函数在所有其他函数之前被调用。

  2. 他在 Avital 的github存储库中使用的方法是“Items = new Meteor.Collection("items", {connection: null});” 它确实适用于“infoNothing”模板，但是如果我使用更典型的连接，那么它会失败。

希望这将为新的渲染功能提供一些见解。如果我有任何问题或有人获得了更好（更有经验）的信息，请发表评论。谢谢

4

0 回答 0