

An Intro to Backbone.js: Part 3 - Binding a Collection to a View - n_time
http://liquidmedia.ca/blog/2011/02/backbone-js-part-3/

======
samg_
Contrived examples like this have a problem, where the code example is too
complex compared to the very simple task, in this case keeping a HTML list
populated with items from a JS object.

I have used binding mechanisms in the Flex framework, which act in a similar
way. The model object dispatches events which the view listens to and updates
its own representation. In Flex the model object is often an
"ArrayCollection," in this example, "Donuts." In Flex the view would often be
some kind of "List" object, in this example, "DonutCollectionView."

The Donut aspect of this example is the contrived bit. It's just a generic
list. Donut could just be any Object that maps to some kind of HTML
representation. DonutCollectionView could just be a CollectionView, that
passes along that representation to a HTML list.

The plumbing in this example is something I don't really want to write if I am
using a framework. If I had to write it, I wouldn't write it like this. Am I
misunderstanding something?

~~~
jashkenas
Nope -- you're not misunderstanding anything ... you probably wouldn't be
writing plumbing like this if you were working on a real app, instead of a
contrived example.

You're absolutely right that it's vastly overcomplicated for the task that
needs to be accomplished here.

~~~
jlyke
Do you have any better examples? I'd like to learn more about where this would
fit in a real app.

~~~
jashkenas
Sure ... some of these have source code available, and some do not.

<http://documentcloud.github.com/backbone/#examples>

In particular the TileMill example (launched yesterday) is a really
sophisticated map editing application, with annotated source code available,
here:

<http://tilemill.com/docs/models.html>

(Use "Jump To", at the top right, to get around)

If you'd like to get your feet wet, and play around with models a little, try
visiting <http://www.documentcloud.org/public>

Pop open a JS console, and try...

    
    
        Documents.length
    
        Documents.first().set({title: "Changing the Title Syncs the View"})
    
        Documents.first().set({description: "Lorem Ipsum Dolor Sit Amet"})
    

... then click on "Annotated Documents", at the top left, go back to the
console, and try:

    
    
        Documents.first().notes.fetch()
    
        Documents.first().notes.first().set({content: "Writing a Note."})
    

You get the idea.

