通过模型更新变量 Backbone

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，提取信息然后更新模型。

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

创建您的输入元素并将它们放入名为 $el 的属性中；然后
将 $el 添加到 DOM；然后
将事件侦听器绑定到 $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 是否有优势？如果你想在未来创建更多这样的视图，什么代码负责 creating/adding 每个视图实例化之前的 $el？

希望对您有所帮助。

通过模型更新变量 Backbone

Updating variable through model Backbone

javascript

model-view-controller

updatemodel

backbone.js