title: backbone.js todomvc add more attributes to model
body: <p>I want to try out Backbone.js and started with the famous TodoMVC-App. I want to add some more attributes via input fields (orgiginally there is only one input field with "todo"), but I cant figure out how. </p>
  
  <p>Before I was trying Angular.js and that was a little bit easier - now I am stucked at the point how I should add more attributes per input fields.</p>
  
  <p>Can anyone give me a hint whats the best/easiest way to achieve this?</p>
  
  <p>Some relevant code snippets:</p>
  
  <p>Index.html:</p>
  
  <pre><code>    &lt;tr class="userInputs" &gt;
          &lt;td&gt;&lt;input id="toggle-all" type="checkbox"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" id="new-todo" placeholder="What needs to be done?" autofocus style="width: 150px"/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" id="newQuantity"/&gt;&lt;/td&gt;
  
          &lt;td colspan="2"&gt;&lt;a &gt;&lt;img src="img/plus.png" id="addItem"&gt;&lt;/a&gt;&lt;/td&gt;
  
      &lt;/tr&gt;
  </code></pre>
  
  <p>model/todo.js</p>
  
  <pre><code>app.Todo = Backbone.Model.extend({
  
      // Default attributes for the todo
      // and ensure that each todo created has `title` and `completed` keys.
      defaults: {
          title: '',
          quantity: 0,
          completed: false
      }
  
  });
  </code></pre>
  
  <p>views/app.js:</p>
  
  <pre><code>initialize: function() {
              this.allCheckbox = this.$('#toggle-all')[0];
              this.$input = this.$('#new-todo');
              this.$footer = this.$('#footer');
              this.$main = this.$('#main');
  
              this.listenTo(app.Todos, 'add', this.addOne);
              this.listenTo(app.Todos, 'reset', this.addAll);
              this.listenTo(app.Todos, 'change:completed', this.filterOne);
              this.listenTo(app.Todos, 'filter', this.filterAll);
              this.listenTo(app.Todos, 'all', this.render);
  
              app.Todos.fetch();
          }
  
  addOne: function( todo ) {
      var view = new app.TodoView({ model: todo });
      $('#todo-list').append( view.render().el );
  }
  
  newAttributes: function() {
      return {
          title: this.$input.val().trim(),
          quantity: this.$input.val().trim(),
          order: app.Todos.nextOrder(),
          completed: false
      };
  }
  
  createOnEnter: function(e) {
  
      app.Todos.create( this.newAttributes() );
      this.$input.val('');
  }
  </code></pre>
  
  <p>Hope this is enough information, otherwise please tell me!</p>