3 ms·
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 rea
by huetsch 15y ago
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?
- yesbabyyes 15y agoBackbone 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 http://jsperf.com/dom-vs-innerhtml-based-templating/160 Another path is "anti templates" like http://beebole.com/pure/ http://beebole.com/pure/ or https://github.com/hij1nx/weld https://github.com/hij1nx/weld
- knowtheory 15y agoYeah 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.
- Pewpewarrows 15y agoNot 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 15y agoI 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.
- jashkenas 15y agoYes, 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.
- lean 15y agoWhat about jQuery? $('<div>', { class: 'content', id: pageId })
- smackjer 15y agoThat's fine for a simple DOM element, but quickly gets out of control. Imagine a list rendered in a loop from a JSON array.