通过模型Backbone更新变量

时间:2015-06-01 12:11:33

标签: javascript backbone.js model-view-controller updatemodel

我有一个基本模型,即创建一个包含几个div的视图。它实际上不是一种形式;但它是作为一种形式。我也有变量设置默认值。这是我现在的模特:

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);
        }
});    

我正在尝试使用输入的特定值更新模型。我需要使用活动吗?我这样做是因为我想检索更新的变量用于输出目的。

也; (如果它不同),让我们说这是一个像状态的下拉菜单..?我会更新它类似于文字字段,如名字吗?

由于

1 个答案:

答案 0 :(得分:3)

您的模型似乎正在访问DOM。通常,您的视图将处理DOM,提取信息然后更新模型。

例如,使用以下构造函数创建视图:

  1. 创建输入元素并将其放在名为$el的属性中;那么
  2. 向DOM添加$el;然后
  3. 将事件侦听器绑定到$el
  4. 这些事件侦听器可以通过对模型的引用来更新模型属性,例如{4}在视图的上下文中。

    视图还可以观察模型的变化并相应地更新自身。

    例如:

    this.model

    创建模型的代码也可以创建此视图并将模型引用传递给视图构造函数,例如。

    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'));
      }
    
    });
    

    当然,所有具体细节都会根据您的具体情况而有所不同。

    如果您想将现有DOM节点用作$ el,请删除创建和附加$ el的前两行代码。然后实例化您的视图,如:

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

    最重要的是,考虑如何最好地设置它。使用已存在的DOM元素作为var existingJqNode = $('#existing'); // find existing DOM node, wrap in jQuery object var myView = new SomeView({ model: myModel, $el: existingJqNode }); 会产生优势吗?如果您希望将来创建更多这些视图,在每个视图实例化之前,哪些代码负责创建/添加$el

    希望有所帮助。