Gaslight Software Blog, Backbone.js Views Done the Right Way. As soon as you build an interesting application in backbone, one of the challenges you are likely to encounter is wanting to have composite views, or views that are contained within a larger view. I’ve solved this problem several ways in different projects and I thought it would be fun to walk through the progression and how I’ve arrived at what I currently see as a preferred solution. Let’s start by talking about what might seem to be the most obvious solution and why it doesn’t actually work. We’ll use as an example a view that displays a collection of people. Let’s assume we’d like to have a view for the table and within it, views for each row. You might end up with a TableView like so: class Example.Views.TableView extends Backbone.View render: -> @$el.html JST["table_view_template"] @ tableRow: (person) -> tableRowView = new Example.Views.TableRowView(model: person) tableRowView.render() tableRowView.
$el.html() With the template for it being: Notice the tableRow method on TableView. 004 JSJ Backbone.js with Jeremy Ashkenas. Podcast: Play in new window | Download (Duration: 54:33 — 74.9MB) Panel Discussion IRC log of Jeremy and Yehuda’s chatIce libraryDocument CloudBackbone.jsCoffeeScriptDropshareclient-side MVCserver persistingjQueryIs backbone really MVC? Backbone CollectionsEmberConvention over ConfigurationHandlebarsjQuery is an opinionated libraryMustacheDOM only approachTemplates in other languagesBenefits of templates on the serverConsistency/bindingCore patternsjQuery deferredsWhen to add features to your libraryBackbone.ModelBindingBackbone.MarionetteRESTAdding onto BackboneAdding hooks Picks Transcript JAMISON: I’m going to pick “computers” next week. [Laughter] CHUCK: No, thanks. YEHUDA: Computers are awesome. CHUCK: [Chuckles] Yeah I use one on occasion.
Because of their well-defined and non-overlapping scope, Backbone.js and Twitter Bootstrap work well together. In general, I find a lightweight architectural framework and a UI toolkit to be a powerful combination, and an interesting alternative to full-stack frameworks: it gives you the flexibility to choose the library you like (if any) in the respective areas of your application. The Sample Application You can run the application here. Twitter Bootstrap highlights Backbone.js highlights One-to-Many association. Sample App with Backbone.js and Twitter Bootstrap.
Begin with the fundamentals, work your way through the exercises, and learn how to build an application that is both cleanly organized and maintainable. Target Audience Credits <! Testing Backbone.js Best Practices. Optimizing the views list creation with document fragment | | BackboneFU, Resources for the Backbone.js developerBackboneFU, Resources for the Backbone.js developer. Before using backbone when working with a list of html nodes I always made it my duty to append them only in one big chunk of text. Manipulating the dom is slow, it triggers a reflow of the page, this is costly even on small lists, specially on mobile. So being not sure what to do with backbone I decided to append each view directly in my container like this. Of course this solution made me grind my teets, I did not want to append each view individually. document.createDocumentFragment() Fortunately, there is another solution than parsing the views as a string and then merging them together.
You can append all the views to a document fragment and then append it to your list container. Since it is a document fragement it retains all the qualities of a DOM node (like finding node throughout it). The cool thing about document fragments is that until it is added to the page it does not trigger a browser reflow, which is the really expensive thing here. Update. Backbone.js Training - A Multi-Day, Hands-On, Training Class. Notice Of Course Discontinuation Please note that as of January 2013 I am no longer offering my Backbone training class on a regular basis. I have exited the consulting world in favor of a full time position working with Kendo UI as a Developer Advocate. While I will continue to be a part of the Backbone community with my new position, offering a private, on-site training class is not something I will be able to do right now. I may bring this back out at some point in the future, but I don't know when (if at all).
Backbone.js Resources There are many resources available for both learning Backbone.js and for asking questions when you run into issues. My Own Resources Documents And User Groups Blogs Code / Sample Projects Application Structure / Boilerplates Books Backbone.js Fundamentals (online book) Addy Osmani is writing a free e-book discussing the fundamentals of Backbone, with a collaborative approach through the use of Github. Backbone.js + CoffeeScript (e-book) Backbone Fundamentals. Organizing Your Backbonejs Application With Modules | Bocoup. If you have spent any time looking at Backbone.js, like many others, you are probably amazed by how lightweight, flexible and elegant it is.