CODEWITHSUNDEEP
javascripthtmlescapinghandlebars.js
JordanBarber
JordanBarber

Reputation: 2101

Add anchor to javascript array for use with handlebars.js

I have a good number of arrays stored in a javascript variable. An example of one of my arrays is:

{
    index: 6,
    template: 2,
    title: "Innovation Center",
    shortname: 'innov',
    projectActive: 'true',
    subtitle: "Construct",
    location: "alaska",
    x: 1304,
    y: 610,
    image1: "img/watt.jpg",
    image2: "img/image_2.jpg",
    bgImage: "img/bgImage.jpg",
    headline1: "Catapulting Ideas to Reality",
    paragraph1: "A long paragraph of text",
    headline2: "The Future Won't Wait, and Neither Will We",
    paragraph2: "This is a long paragraph of text",
    listTitle: "Innovative resources include: ",
    listItems: [
            { item: "Visual analytics" },
            { item: "Communication skills development" },
        ]
},

This is printed into HTML using handlebars.js like this:

<div class="header" style="background-image: url( {{ bgImage }} );" >
          <div class="container">
            <div class="col-sm-12">
              <h1> {{ title }} </h1>
              <h4> {{ subtitle }} </h4>
            </div>
          </div>
        </div>

        <div class="container">
            <div class="row paragraph1">
              <div class="col-sm-6" >
                <div class="image1" style="background-image: url( {{image1}} );">
                </div>
              </div>
              <div class="col-sm-6">
                <h2> {{ headline1 }}</h2>
                <p> {{ paragraph1 }} </p>
              </div>
            </div>

My question is how can I wrap some of the text in the 'paragraph' key value using html. So what I would like to do is:

paragraph1: "A long <a href="google.com">paragraph</a> of text",

But this is simply spitting out the code on the page. Any help will be greatly appreciated.

Upvotes: 1

Views: 492

Answers (1)

Kevin Boucher
Kevin Boucher

Reputation: 16685

Try using triple-stashes:

{{{ paragraph1 }}}

http://handlebarsjs.com/#html-escaping

Upvotes: 2

Related Questions