CODEWITHSUNDEEP
meteorspacebars
fuzzybabybunny
fuzzybabybunny

Reputation: 5254

How to precompile html as Spacebars helpers in Meteor?

I'm building a FAQ page and I want to return an array containing the questions and answers into my spacebars helper.

faq.js

var faqContents = [
  {
    number: "One",
    question: "Who needs acupuncture?",
    answer: "<p>If you are suffering from pain or have a health problem that has not responded satisfactorily to Western medicine, you may benefit tremendously from acupuncture and herbs. In many cases, acupuncture has been more effective than conventional Western treatments. <br/>Your most valuable asset is good health. Invest in it wisely. Consider acupuncture.</p>")
  }, {
    number: "Two",
    question: "What can I expect if treated?",
    answer: "<p>Many conditions may be alleviated very rapidly by acupuncture; however, some conditions which have risen over a course of years will only be relieved with slow, steady progress. As in any form of healing, the patient’s attitude, diet, determination, and lifestyle will affect the outcome of a course of treatment.</p><p>Although there are techniques in Traditional Oriental Medicine for healing most conditions, there are medical circumstances that can be dealt with more effectively by Western Medicine. In such cases, your acupuncturist will recommend that you contact a physician. As in the case in China, acupuncture should be seen as complementary with Western Medicine.</p>"
  }
];

Template.faq.helpers({
    faqContents: function(){
        return faqContents;
    }
});

But the following code renders the actual html tags in the text in browser view. 

{{#each faqContents}}

<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse{{number}}">{{question}}</a>
    </h4>
  </div>
  <div id="collapse{{number}}" class="panel-collapse collapse">
    <div class="panel-body">
      {{answer}}
    </div>
  </div>
</div>

{{/each }}

Not sure how to proceed.

Upvotes: 0

Views: 501

Answers (1)

fardeem
fardeem

Reputation: 594

Instead of {{answer}} use {{{ answer }}}. This tells Meteor not to escape the HTML tags and just output the raw HTML. Check the spacebar docs at the Github Repo.

It is however not recommended just because of security. What's stopping you from using it like so:

<p>{{ answer }}</p>

Upvotes: 1

Related Questions