[huetsch]

This is my first exposure to Backbone (aside from hearing DHH recommend it at RailsConf). It looks like it helps formalize a lot of what I'd already come to realize was a good way of doing large JS apps - MVC design.

However, I've found one of the most painful things I have to do when doing a lot of JS is dealing with HTML as a string. Escaping quotes is a pain in the neck, syntax highlighting is broken in my editors. The HTML here is pretty simple so it's not problematic, but sometimes you need to render larger, more complex blocks of HTML. HTML is just not as easy to work with in JS when you compare it to the templating systems provided by Rails, Pylons, etc. Does Backbone have anything to help this?

[Pewpewarrows]

Not Backbone itself, but its dependency written by the same (awesome) developers: Underscore.js. Underscore has functions to help you with client-side templating. It basically boils down to you writing html as you normally would within a script tag, like so:

    <script id="foobar" type="text/html">
        <ul>
            <li><%= test %></li>
        </ul>
    </script>

Because it's in a script tag, the browser doesn't render that snippet of a template on its own. And since the type is text/html, the browser also doesn't try to interpret that as javascript. Now all you have to do is select the id of the script tag using your favorite library (like jQuery) or with getElementById, get the innerHtml as a string, and pass it to Underscore's template function along with a dictionary of values that you want replaced (such as test above). Like Django or Rails templates, you also can do some basic logic within the template, like looping over an array to make a list of items.

If Underscore's syntax isn't your cup of tea, there's a slew of other libraries available, like Mustache or jQuery's own tmpl module. You'll never go back to building the DOM yourself or dozens of concatenated strings of html again!

[shaunxcode]

I have a class called Tag with static methods for all relevant tag names which merely wraps $('<' + tagname + '/>') and thus allow for stuff like:

   Tag.ul(
       Tag.li('unclickable li tag')
           .addClass('unclickable'),
       Tag.li('test clickable li tag')
           .addClass('clickable')
           .click(function() {
               alert('clicked on test')}))

I prefer this as it keeps my view code "in language" and makes it easy to apply any sort of jquery methods which I need to the different elements.

[yesbabyyes]

Backbone itself doesn't have template support, but there are loads of libraries for that. There is a list in this performance rundown:

http://jsperf.com/dom-vs-innerhtml-based-templating/160

Another path is "anti templates" like http://beebole.com/pure/ or https://github.com/hij1nx/weld

[jashkenas]

Yes, embedding HTML in strings is an awful pattern, and something you should strive to avoid at all costs. Backbone.js is intended to work with the templating library of your choosing, and there are good JS templating helpers for Rails in the form of Sprockets 2 and Jammit.

[knowtheory]

Yeah but if you look at the structure of this, it's just using jQuery's abilities to append stuff. You could just as easily build a node structure using document.createElement and append an actual DOM node to the body, if you're concerned about mistyping raw HTML.

[lean]

What about jQuery?

$('<div>', { class: 'content', id: pageId })

[smackjer]

That's fine for a simple DOM element, but quickly gets out of control. Imagine a list rendered in a loop from a JSON array.