Updating variable through model Backbone

Question

I have a base model, that is creating a view with several div's. It is not actually a form; but it is acting as a form. I have variables being set with defaults as well. Here's my model right now:

var BaseModel = require('base-m');

var SomeModel = BaseModel.extend({
    defaults: function() {
        return {
            FirstName    : null,
            LastName     : null,
            Age          : null,
            State        : null
        };
    }
    update: function() {
        return {
            FirstName    : $('[name="FirstName]').val()
        };
        console.log(FirstName);
        }
});    

I am trying to update the model with the particular value of whatever is entered. Do I need to use an event? I am doing this because I want to retrieve the updated variable for output purposes.

Also; (if it's different), lets say it's a drop down menu like states..? Would I update it similar to a text field like first name?

Thanks

Answer 1

It appears your model is accessing the DOM. Usually, your view would deal with the DOM, extracting information then updating the model.

So for example, create a view with a constructor that:

1. Creates your input elements and put them in an attribute called $el; then
2. Adds $el to the DOM; then
3. Binds event listeners to $el.

These event listeners can update model attributes via a reference to the model, e.g. this.model in the view's context.

The view can also watch the model for changes and update itself accordingly.

For example:

var SomeView = Backbone.View.extend({
   // Store HTML of DOM node in template. Easy to change in future.
  template: [
        '<div class="blah">',
        '<input type="text" class="hello" />',
        '</div>'
    ].join(''),

  initialize: function() {
      // Create DOM node, add to DOM
      this.$el = $(_.template(this.template)());
      $("body").append(this.$el);
      this.hello = this.$el.find('.hello');

      // Update model when view changes
      this.hello.on('keydown', this.updateModel);

      // Update view when model changes
      this.model.on('change', this.updateView);
  },

  updateModel: function(evt) {
      this.model.set('hello', this.hello.val());
  },

  updateView: function() {
      this.hello.val(this.model.get('hello'));
  }

});

The code that creates your model could also create this view and pass the model reference to the view constructor, e.g.

var myModel = new SomeModel();
var myView = new SomeView({model: myModel});

Of course, all of the specifics will vary according to your situation.

If you would like to use an existing DOM node as $el, remove the first two lines of code that create and append $el. Then instantiate your view like:

var existingJqNode = $('#existing'); // find existing DOM node, wrap in jQuery object
var myView = new SomeView({
    model: myModel, 
    $el: existingJqNode
});

Above all, think about how best to set this up. Does using an already existing DOM element as $el create an advantage? If you want to create more of these views in the future, what code is responsible for creating/adding the $els before each view is instantiated?

Hope that helps.