CODEWITHSUNDEEP
htmltemplatesmeteorhandlebars.js
koramaiku
koramaiku

Reputation: 358

Meteor Templates force as HTML

I have been using Meteor for about 2 weeks and I have come across a problem where I have a template that is called dynamically and I am also required to insert some feedback text as HTML. Here is part of the template and js code that I am using to attempt to make this happen.

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();

        });
    });

Here is also an example of a template that I am using.

    <!-- 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 -->

I have this variable called messageFeedback which I will insert as part of the data that needs to render in a template using Meteor's render function.

I managed to successfully pass the messageFeedback string as plain text, but what I want it to do is I want this to be rendered in HTML so the appropriate presentation comes up.

I have tried methods such as the the 3 {{{ }}}'s as outlined in this question, How to render HTML of Meteor Session variable?, or using Handlebars's SafeString, Rendering templates within helpers in handlebars but to no avail as they will always render in plain text instead of HTML form, showing the HTML tags.

If someone has any other ideas to make it render correctly it would be really appreciated.

Thanks

Upvotes: 2

Views: 1049

Answers (1)

zeroasterisk
zeroasterisk

Reputation: 2209

Take a look at this handlebar helper: https://github.com/zeroasterisk/Presenteract/blob/master/client/lib/handlebar-helpers.js#L10-15

I use it in a template as follows:

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

So it would look at blogPost.title, and render it, HTML and all.

You could try to wrap messageFeedback as follows:

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

And I think that should work...

But, upon second review, you might have better luck rethinking your approach.

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

And in the HTML

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

The sessionEquals helper can be found at: https://github.com/zeroasterisk/Presenteract/blob/master/client/lib/handlebar-helpers.js#L25-33

Upvotes: 3

Related Questions