Backbone - Structuring views for a simple app

Question

I'm just starting with Backbone.js so please excuse the simplicity of the question.

I'm working through the standard "Todo" example and want to extend the "Todo" so that it can have multiple fields. Currently the "Todo" app just uses a single field from within the AppView to trigger new items into the collection.

Index.html

<header id="header">
  <h1>todos</h1>
  <input id="new-todo" placeholder="What needs to be done?" autofocus>
</header>

App.js

app.AppView = Backbone.View.extend({
    events: {
        'keypress #new-todo': 'createOnEnter'

Therefore I believe the current structure is

AppView

-->Collection (Todos)

-->View (Todo List Item)

I would like to make the new item template its own view

AppView

-->Collection (Todos)

-->View (Todo List Item)

-->View (Todo : New Item)

I'm a little lost as to how this view add somethings into the collection. The appview currently just calls.

createOnEnter: function( e ) {
            if ( e.which !== ENTER_KEY || !this.$input.val().trim() ) {
                return;
            }

            app.Todos.create( this.newAttributes() );
            this.$input.val('');
        }

How do I get a reference to the collection from within my new view?

fluent fluent · Accepted Answer · 2013-02-08T12:15:52

So simple when you know what to look for...

var view = new app.NewTodo({ collection : app.Todos});

This can then referenced inside your view using..

this.collection.create({ title: 'Bonjour', order: 99, completed: false });

Backbone - Structuring views for a simple app

1 Answers