javascript - 通过模型Backbone更新变量

Question

我有一个基本模型，它正在创建一个包含多个 div 的 View 。它实际上不是一种形式；而是一种形式。但它只是作为一种形式。我也设置了默认值的变量。这是我现在的模型:

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

我正在尝试使用输入的特定值来更新模型。我需要使用事件吗？我这样做是因为我想检索更新后的变量以用于输出目的。

还有； (如果不同)，可以说它是一个像状态一样的下拉菜单..？我会像名字这样的文本字段一样更新它吗？

谢谢

Answer 1

看来您的模型正在访问 DOM。通常，您的 View 将处理 DOM，提取信息然后更新模型。

例如，使用构造函数创建一个 View :

1. 创建输入元素并将它们放入名为 $el 的属性中；然后
2. 将 $el 添加到 DOM；那么
3. 将事件监听器绑定(bind)到 $el。

这些事件监听器可以通过对模型的引用来更新模型属性，例如 View 上下文中的 this.model。

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

例如:

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

});

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

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

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

如果您想使用现有的 DOM 节点作为 $el，请删除创建和附加 $el 的前两行代码。然后实例化您的 View ，如下所示:

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

最重要的是，考虑如何最好地进行设置。使用现有的 DOM 元素作为 $el 是否有优势？如果您想在将来创建更多这样的 View ，那么在实例化每个 View 之前，哪些代码负责创建/添加 $el ？

希望有帮助。