CODEWITHSUNDEEP
javascriptbackbone.jscoffeescript
laetiporous
laetiporous

Reputation: 80

Backbone Todos Example Method Binding

I am working my way through the backbone todos coffeescript tutorial. I am trying to understand why @addOne, @addAll methods are defined in AppView and then bound to Todos(Backbone.Collection/TodoList instance) from within AppView. Why are these methods not just defined in TodoList itself?

class TodoList extends Backbone.Collection

...

class AppView extends Backbone.View

    initialize: =>
        ...
        @input = this.$("#new-todo")

        Todos.bind("add", @addOne)
        Todos.bind("reset", @addAll)
        Todos.bind("all", @render)

        Todos.fetch()

    ...

    addOne: (todo) =>
        view = new TodoView( {model: todo} )
        this.$("#todo-list").append( view.render().el )

    # Add all items in the **Todos** collection at once.
    addAll: =>
        Todos.each(@addOne);

   ...

Todos = new TodoList
App = new AppView()

Upvotes: 0

Views: 61

Answers (1)

lyoung
lyoung

Reputation: 427

It's your basic separation of concerns. Models contain data, and views manage the DOM. If you look at the function addOne, you can see that it is creating a new view and attaching it to the DOM:

this.$("#todo-list").append( view.render().el )

The binding makes it so anytime you add a new item to a model (data), it automatically calls addOne which creates a new view (DOM).

Upvotes: 1

Related Questions