assign html snippet in javascript

Question

There are times that I need to assign a html snippet to a javascript var, such as,

var homePage =
    '<div>' +
        '<div class="header"><h1>Page Slider</h1></div>' +
        '<div class="scroller">' +
                '<ul class="list">' +
                '<li><a href="#page1"><strong>Build Bot</strong></a></li>' +
                '<li><a href="#page2"><strong>Medi Bot</strong></a></li>' +
                '<li><a href="#page3"><strong>Ripple Bot</strong></a></li>' +
            '</ul>' +
        '</div>' +
    '</div>';

This can work good, but it makes editing a bit hard. May I know any framework can do this elegantly?

Yes, templates is the way to go. See stackoverflow.com/questions/766597/… — blurfus
– blurfus, Commented Jun 3, 2014 at 18:15
Templating, like Nit says, or a more fully-fledged solution in something like Knockout/Angular/(Ember? haven't used it)/etc, where you define your HTML in HTML files then bind elements to your JS model, may be worth looking into — Shai
– Shai, Commented Jun 3, 2014 at 18:16
You could also use RequireJS and import the contents of a separate html text file as a dependency. But you should just use templates. They're established because they're good. — Keen
– Keen, Commented Jun 3, 2014 at 18:17
Thanks. If I want to put a handlebars template in a separate JS to be loaded with requirejs, shall I use github.com/SlexAxton/require-handlebars-plugin? — Hammer
– Hammer, Commented Jun 4, 2014 at 3:58
or is it a better practice to put the templates in HTML file instead? — Hammer
– Hammer, Commented Jun 4, 2014 at 4:21

Edward · Accepted Answer · 2014-06-03 19:48:37Z

2

Use handlebars.js this is how is works:

Server side:

Send a JSON object back to javascript. I usually use something like this: echo json_encode(array('object_name'=>$obj));

HTML

Create a container on your page. <div id="#my_template_container"></div>

Javascript:

usually in your AJAX success function:

Parse your data into a JSON object:
var my_obj= JSON.parse(data);
Create a reference to the template:
var tmpl = $("#my_layout").html();
Use the Handlebars engine to compile the template:
var theTemplate = Handlebars.compile(tmpl);
Append the template to the HTML
$('#my_template_container').html(theTemplate(my_obj));

Template

Access your object in the template by it's name, in this example it would be : object_name the variable I assigned in my echo json_encode(array('object_name'=>$obj)) statement from PHP.
Access properties of the object using {{Property_Name}}.
To access properties of object children use the nested path operator: {{Propert_Name.ID}}

   <script id="my_layout" type="text/x-handlebars-template">
        {{#object_name}}
         '<div>' +
                '<div class="header"><h1>Page Slider</h1></div>' +
                '<div class="scroller">' +
                        '<ul class="list">' +
                        '<li><a href="#page1"><strong>{{property1}}</strong></a></li>' +
                        '<li><a href="#page2"><strong>{{property2}}</strong></a></li>' +
                        '<li><a href="#page3"><strong>{{property3}}</strong></a></li>' +
                    '</ul>' +
                '</div>' +
            '</div>';
        {{/object_name}}

        </script>

edited Jun 3, 2014 at 19:48

answered Jun 3, 2014 at 18:23

Edward

3,0996 gold badges35 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Hammer Over a year ago

Thanks. If I want to put a handlebars template in a separate JS to be loaded with requirejs, shall I use github.com/SlexAxton/require-handlebars-plugin?

Hammer Over a year ago

or is it a better practice to put the templates in HTML file instead?

Hammer Over a year ago

it ends up I am using Koorich's lightweight way of fetching html template to render,stackoverflow.com/questions/8366733/…

Jashwant · Accepted Answer · 2014-06-04 17:10:15Z

I created a very light plugin, just for the times, when you just want to use some html inside js, and do not require a lot of options provided my templating frameworks and thus want to avoid heavy js.

Coffee script

(($) ->
  utCache = {}
  $.fn.ut = (tmplID, obj) ->
    _tmpl = (str) ->
      fn = "var p=[]; p.push('" + str.replace(/[\r\t\n]/g, " ").replace(/'(?=[^%]*%>)/g, "\t").split("'").join("\\'").split("\t").join("'").replace(/<%=(.+?)%>/g, "',$1,'").split("<%").join("');").split("%>").join("p.push('") + "'); return p.join('');"
      new Function("o", fn)
    _getData = (ele) ->
      $(ele).html utCache[tmplID](obj)
    @each ->
      ele = this
      utCache[tmplID] = _tmpl($(tmplID).html()) unless utCache[tmplID]
      _getData ele
) jQuery

Javascript

(function($) {
  var utCache;
  utCache = {};
  return $.fn.ut = function(tmplID, obj) {
    var _getData, _tmpl;
    _tmpl = function(str) {
      var fn;
      fn = "var p=[]; p.push('" + str.replace(/[\r\t\n]/g, " ").replace(/'(?=[^%]*%>)/g, "\t").split("'").join("\\'").split("\t").join("'").replace(/<%=(.+?)%>/g, "',$1,'").split("<%").join("');").split("%>").join("p.push('") + "'); return p.join('');";
      return new Function("o", fn);
    };
    _getData = function(ele) {
      return $(ele).html(utCache[tmplID](obj));
    };
    return this.each(function() {
      var ele;
      ele = this;
      if (!utCache[tmplID]) {
        utCache[tmplID] = _tmpl($(tmplID).html());
      }
      return _getData(ele);
    });
  };
})(jQuery);

You can use it simply like,

$('#my-div').ut("#my-template", { name: 'jashwant'});

when we have following HTML:

<div id='my-div'></div>

<script type='javascript' id='my-template'>
  <p><%=o.name %> welcomes you !</p>
</script>

geoff · Accepted Answer · 2014-06-03 18:17:05Z

0

Do it with Javascript's document methods.

var topdiv = document.createElement('div');
var headerDiv = document.createElement('header');
var header = document.createElement('h1');
header.innerHTML = 'Page Slider';
headerDiv.appendChild(header);

// etc....

Or use templating.

answered Jun 3, 2014 at 18:17

geoff

2,2741 gold badge19 silver badges36 bronze badges

Comments

karliwson · Accepted Answer · 2014-06-03 18:25:29Z

0

Just use backslashes to escape line breaks.

Eg:

var homePage =
    '<div> \
        <div class="header"><h1>Page Slider</h1></div> \
        <div class="scroller"> \
                <ul class="list"> \
                <li><a href="#page1"><strong>Build Bot</strong></a></li> \
                <li><a href="#page2"><strong>Medi Bot</strong></a></li> \
                <li><a href="#page3"><strong>Ripple Bot</strong></a></li> \
            </ul> \
        </div> \
    </div>';

Use \n\ instead of \ if you want to include the line breaks in the string.

answered Jun 3, 2014 at 18:25

karliwson

3,4861 gold badge29 silver badges46 bronze badges

8 Comments

Keen Over a year ago

Note that ANY CHARACTERS between the `\` and the line break will wreck this method. This allows no whitespace and no comments at the ends of these lines.

karliwson Over a year ago

You can always put them before the backslash.

Keen Over a year ago

That would include the comments in the string.

karliwson Over a year ago

If you don't want to see comments you just don't comment. HTML comments would be included even if the file was imported by Ajax or some templating engine.

Keen Over a year ago

JavaScript comments, with //. HTML comments are naturally part of the HTML, so of course we would want those included anyway.

|

Collectives™ on Stack Overflow

assign html snippet in javascript

4 Answers 4

Server side:

HTML

Javascript:

Template

3 Comments

Comments

Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Server side:

HTML

Javascript:

Template

3 Comments

Comments

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related