4

セッション変数が変更されたときに再レンダリングし、DOM を直接操作することで、さまざまなテンプレートをレンダリングしてコンテナー テンプレート内に配置することができます。しかし、これは Meteor のやり方とは思えません。DOM の更新を処理する慣用的な方法はありますか?

クライアント.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() 関数から返し、次のようにハンドルバーで安全であるとマークすることです。

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.

これには 2 つの落とし穴があり、理想的ではない可能性があります。

  1. メイン テンプレート内にレンダリングされるネストされたテンプレートも、SafeString としてマークする必要があります。そうしないと、コンテンツはハンドルバーによってエスケープされます。ネストされたすべてのテンプレートに SafeString コードが必要なため、これは肥大化につながる可能性があります。
  2. 文字列を安全、つまりエスケープされていないものとしてマークすることで、安全でない可能性のある文字列をページに挿入する前にエスケープすることを覚えておく責任が開発者にあります。これらが多ければ多いほど、セキュリティ ホールを作成する可能性が高くなります。(ドキュメントについては、 http://handlebarsjs.com/を参照してください)

ですから、私の考えでは、質問はまだ未解決です。しかし、私は編集者に委ねます。

4

3 に答える 3

3

Handlebars 条件を使用します。

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

Meteor JavaScript コードで:

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

foo と bar の両方がコンテンツを共有する場合、ヘルパーを使用するか、foo と bar の両方で同じパーシャルを使用することができます (つまり、.

{{> 内容}}

) 必要に応じて。

于 2012-12-25T03:46:41.150 に答える
1

これは私が使用しているセットアップです

client/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']();
    }
};

client/template.html

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

ページを変更するには、Session.set("page", "xyz") を実行する必要があり、{{{のため、自動的に SafeString としてマークされます。

1. テンプレート「xyz」内のネストされたテンプレートは、SafeString としてマークする必要はありません。エスケープされる前にすべてレンダリングされます。

{{text}} のようなデータを出力すると、再び自動的にエスケープされ、再びエスケープされないため、その必要はありません。

于 2012-12-25T10:57:55.157 に答える
0

公開された変数 (テンプレート ヘルパー) に保存されている名前を使用して、テンプレートを参照できます。

{{> Template.dynamic template=varHandlingTemplateName }}

これは、meteorjs が最新バージョン (今日の時点) で動的テンプレートの状況を解決する方法です。

よろしく、 グレッグ

于 2015-11-06T15:42:28.123 に答える