Question

通过在会话变量更改时重新呈现然后直接操作DOM，可以呈现不同的模板并将它们放置在容器模板中。但是，这并不像流星的方式。是否有一种处理DOM更新的惯用方法？

Client.js

if (Meteor.isClient) {

    var getContainerContents = function() {
        console.info('get container contents');
        var active = Session.get('active') == 'foo' ? 'foo' : 'bar';
        return Meteor.render(Template[active]());
    };

    Template.foo.contents = function() {
        console.info('foo contents');
        return 'The foos.';
    };

    Template.bar.contents = function() {
        console.info('bar contents');
        return 'The bars.';
    };

    Meteor.startup(function() {
        console.info('startup');

        Meteor.autorun(function() {
            console.info('autorun');
            $('#container').html(getContainerContents());
        });
    });

}

Client.html

<head>
  <title>conditional templates</title>
</head>

<body>
  {{> main }}
</body>

<template name="main">
  <section id="container"></section>
</template>

<template name="foo">
  <h2>Foos</h2>
  {{ contents }}
</template>

<template name="bar">
  <h2>Bars</h2>
  {{ contents }}
</template>

更新：也可以使用模板助手来实现此目的。解决方案是从template（）函数返回未呈现的字符串内容，并在Handlebars中将它们标记为安全，如下所示：

HTML

<template name="main">
  {{ contents }}
</template>

JS

var getContainerContents = function() {
    console.info('get container contents');
    var active = Session.get('active') == 'foo' ? 'foo' : 'bar';
    return Template[active]();
};

Template.main.contents = function() {
    return new Handlebars.SafeString(getContainerContents());
};

// Remove the startup and autorun code. Not necessary now.

这有两个问题可能使它不太理想。

在主模板中呈现的任何嵌套模板也必须标记为SafeString。否则，内容将由Handlebars转义。这可能会导致一些膨胀，因为每个嵌套模板都需要SafeString代码。
通过将字符串标记为安全字符串，即未转义字符串，现在开发人员有责任记住在将它们插入页面之前转义任何可能不安全的字符串。您拥有的越多，您创建安全漏洞的可能性就越大。（有关文档，请参阅http://handlebarsjs.com/）

所以，在我看来，这个问题仍然存在。但我会推荐编辑。

Answer 1

使用Handlebars条件：

<template name="main">
  {{#if active}}
    {{> foo}}
  {{else}}
    {{> bar}}
  {{/if}}
 </template>

在Meteor JavaScript代码中：

Template.main.active = function () {
  return Session.get("active");
}

如果foo和bar共享内容，你可以使用Helper，也可以让foo和bar使用相同的部分（即。

{{＆GT;内容}}

）取决于您的需要。

Answer 2

这是我正在使用的设置

的客户机/ client.js

Template.page.display_content = function () {
    var page_index = Handlebars.Utils.escapeExpression(Session.get('page'));

    if (Template[page_index]) {
        return Template[page_index]();
    } else {
        return Template['page_not_found']();
    }
};

的客户机/ template.html

<template name="page">
    {{{display_content}}}
</template>

我只需要做Session.set（“page”，“xyz”）来更改页面，因为 {{{它会自动标记为SafeString。

到1。模板“xyz”中的嵌套模板不需要标记为SafeString，它们在转义之前都会被渲染

到2。您没有必要，因为如果您输出一些数据，例如{{text}}，它会再次自动转义，它就不会再次转义

Answer 3

您使用存储在公开变量中的名称（在模板助手中）引用模板：

{{> Template.dynamic template=varHandlingTemplateName }}

这是meteorjs在其最新版本（截至今天）解决动态模板情况的方式。

此致格雷格

Meteorjs嵌套条件模板

3 个答案: