Elegant clean way to include HTML in JavaScript files?

Question

I\'m building a small app with a few modal dialog windows. The windows require a tiny bit of HTML. I\'ve hard coded the window HTML in the javascript library but am not th

Answer 1

There is 2 solutions tto your problem: - An alternative to the heredoc Syntax in javascript is to escape the newline char with \ :

var tpl = "hello\
stackoverflow\
World !";

The char is escaped so ignored, and it wont take place in the resulting string.

You can also create a plain html file with your template, and in your js script you create a hidden iframe and load the crossdomain html template. You can now access the document object of the iframe and retreive body.innerHTML. In theory! I Didn't tested this solution yet....

Answer 2

Cook.js

div([
  button({click:[firstEvent, secondEvent]},
         'You can bind (attach) events on the fly.'),
  p('Here are some popular search engines'),
  ul([
    li([
      a('Google', {href:'http://www.google.com'})
    ]),
    li([
      a('Bing', {href:'http://www.bing.com'})
    ]),
    li([
      a('Yahoo', {href:'http://www.yahoo.com'})
    ])
  ])
]);

how it works

Objects = Attribute & Events
    -> {href:'facebook.com', src:'static/cat.gif', ng-bind:'blah'}
String  = Text or Html
    -> 'hello world'
Array   = Elements
    -> [a('hello world', {href:'facebook.com'}), img({src:'static/cat.gif'})] 

more on cook.js!

Answer 3

Templates. Pick your poison

• EJS
• jQuery templates (nb: development discontinued)
• underscore templates
• mustache
• jResig micro templates

Either inline them as script blocks or load them using ajax as external resources.

I personally use EJS as external template files and just get EJS to load them and inject them into a container with json data bound to the template.

new EJS({ 
    url: "url/to/view"
}).update('html_container_name', {
    "foobar": "Suprise"
});

And then view files use generic view logic.

// url/to/view
<p> <%=foobar %></p>

Answer 4

You're right, JS doesn't have heredocs or multi-line strings. That said, the usual approach to this is to have the HTML in...the HTML, and show or hide it as appropriate. You're already using jQuery, so you're most of the way there:

<div style="display:none;">
    <form method='post' class="email">
         <input id='from' type='text'> <!-- other form fields omitted for brevity -->
    </form>
    <form method='post' class="facebook"></form> <!-- again, omitted for brevity -->
</div>

Then, you can populate the form and toss it in the right spot:

$('#data').html($('form.email').find('input#from').val(email).end().html());

Answer 5

You can include the HTML as regular markup at the end of the page, inside an invisible div. Then you're able to reference it with jQuery.

You then need to programmatically set your variable fields (email, subject, body)

<div id='container' style='display: none;'>
  <div id='your-dialog-box-contents'>
    ...
    ...
  </div>
</div>

<script type='text/javascript'>
  $("#from").val(from);
  $("#subject").val(subject);
  $("#body").val(body);
  $("#data").html($("#your-dialog-box-contents"));
</script>

Answer 6

Personally I like building DOM trees like this:

$('#data').html(
    $('<div/>', {
        id: 'email_window',
        html: $('<h2/>', {
            html: 'Email Share'
        })
    }).after(
        $('<form/>', {
            action: 'javascript:emailDone();',
            method: 'post',
            html: $('<div/>', {
                html: $('<label/>', {
                    for: 'to',
                    html: 'To'
                }).after($('<input/>', {
                    id: 'to',
                    type: 'text'
                }))
            }).after(
                ... etc
            )
        })
    )
);