通过模型骨干更新变量

hiquetj 发表于 Dev

希奎特

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

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

还; （如果不同），可以说这是一个类似于状态的下拉菜单。我是否将其更新为类似于名字的文本字段？

谢谢

用户名

看来您的模型正在访问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有优势？如果将来想创建更多这样的视图，在$el实例化每个视图之前，什么代码负责创建/添加？

希望能有所帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。