通过模型主干更新变量

Question

我有一个基本模型，即创建一个包含多个 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);
        }
});    

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

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

谢谢

Answer 1

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

例如，使用以下构造函数创建一个视图：

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

这些事件监听器可以通过对模型的引用来更新模型属性，例如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'));
  }

});

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

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

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

如果您想将现有的 DOM 节点用作 $el，请删除创建并附加 $el 的前两行代码。然后像这样实例化您的视图：

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

首先，考虑如何最好地进行设置。使用已经存在的 DOM 元素作为 $el 会产生优势吗？如果您以后想创建更多这样的视图，在每个视图实例化之前，哪些代码负责创建/添加$els？

希望对您有所帮助。