【问题标题】:Meteor Templates force as HTMLMeteor 模板强制为 HTML
【发布时间】:2013-05-22 18:46:00
【问题描述】:

我已经使用 Meteor 大约 2 周了,我遇到了一个问题,我有一个动态调用的模板,我还需要插入一些反馈文本作为 HTML。这是我用来尝试实现这一点的模板和 js 代码的一部分。

Accounts.createUser({
           <<SOME OPTIONS FOR THIS METHOD >>
        }, function(error){
            var templateName;
            var messageFeedback;
            if(error){
                .... some other code

            } else {                    
                //THIS IS WHERE MY PROBLEM LIES
                messageFeedback = '<span class="helper-caps">Thanks for Signing Up</span><br />' +
                'A confirmation email has been sent to the team. You wil be notified by email when your account has been verified<br />';

                templateName = 'formSuccess';

            }

            //proceed to render the correct message.
            var formData= { formResultMessage: messageFeedback }
            var message = Meteor.render(Template[templateName](formData));

            _formElement.append(message);

            Meteor.flush();

        });
    });

这也是我正在使用的模板示例。

    <!-- Form Success -->
<template name="formSuccess">
    <div class="row">
        <div class="columns">
            <div class="alert-box">
                <p class="helper-no-marg-vert">
                    {{formResultMessage}}
                </p>
            </div>
        </div>
    </div>
</template>
<!-- Form Success -->

我有一个名为 messageFeedback 的变量,我将把它作为需要使用 Meteor 的渲染函数在模板中渲染的数据的一部分插入。

我成功地将 messageFeedback 字符串作为纯文本传递,但我想要它做的是我希望它以 HTML 呈现,以便出现适当的演示文稿。

我已经尝试过诸如此问题中概述的 3 个 {{{ }}} 的方法,How to render HTML of Meteor Session variable?,或使用 Handlebars 的 SafeString,Rendering templates within helpers in handlebars,但无济于事,因为它们将始终以纯文本呈现而不是 HTML 表单,显示 HTML 标签。

如果有人有任何其他想法可以使其正确呈现,我们将不胜感激。

谢谢

【问题讨论】:

    标签: html templates meteor handlebars.js


    【解决方案1】:

    看看这个车把助手: https://github.com/zeroasterisk/Presenteract/blob/master/client/lib/handlebar-helpers.js#L10-15

    我在模板中使用如下:

    {{#with blogPost}}
    <h1>{{safe 'title'}}</h1>
    

    所以它会查看 blogPost.title,然后渲染它,HTML 和所有内容。

    您可以尝试将messageFeedback 包装如下:

    var formData= { 
      formResultMessage: new Handlebars.SafeString(messageFeedback)
    }
    

    我认为这应该可行...


    但是,在第二次审查时,重新考虑你的方法可能会更好。

    ...
    Session.set('createUserFeedbackTemplate', 'formSuccess');
    Session.set('createUserMessage', new Handlebars.SafeString(messageFeedback));
    ...
    

    在 HTML 中

    {{#if sessionEquals 'createUserFeedbackTemplate' 'formSuccess'}}
      {{> formSuccess}}
    {{/if}}
    {{#if sessionEquals 'createUserFeedbackTemplate' 'formError'}}
      {{> formError}}
    {{/if}}
    

    sessionEquals 助手可以在以下位置找到: https://github.com/zeroasterisk/Presenteract/blob/master/client/lib/handlebar-helpers.js#L25-33

    【讨论】:

    • 感谢您的帮助。尽管我最终采用了第二种解决方案。我会记住其他两种可能的解决方案。 :)
    猜你喜欢
    • 2015-02-05
    • 2014-04-12
    • 1970-01-01
    • 1970-01-01
    • 2015-01-18
    • 1970-01-01
    • 1970-01-01
    • 2015-07-28
    • 2012-12-04
    相关资源
    最近更新 更多