javascript - 将表单复制到 Backbone.js 模型

Question

我有一个表格：

<form>
    <input type="text" name="email" >
    <input type="text" name="phone" >
    <input type="button" value="ok" />
</form>

单击按钮时，我想将表单值复制到相应的模型中。

我发现Backbone.ModelBinder会在值更改时自动将值复制到模型，但这不是我想要的，我只想在单击按钮时复制值。

Answer 1

这段代码可能是你需要的：</p>

events: {
  ...
  'click input[value="ok"]': 'collectData2Model'
  ...
},

...
//suppose employee is your model
collectData2Model: function(e) {
    var employee = new Employee();
    var attr = {};
     $('input').each(function(){
            var input = $(this);
            attr[input.attr('name')] = input.val();
      });
       employee.bind('error',function(model,error){
            alert(error);
        });
      // set method will automatically call the model's validate method 
       employee.set(attr);
}

Answer 2

将自定义函数写入表单所在的视图中，并将其绑定到 ok click 事件：

events: {
  ...
  'click input[name="ok"]': 'copyFormToModel'
  ...
},

...

copyFormToModel: function() {
  var email = $('input[name="email"]').val();
  var phone = $('input[name="phone"]').val();

  // Perform some sort of validation

  this.model.email = email;
  this.model.phone = phone;
}

这不是最漂亮的答案，但如果您的页面中只有一个小表单，那么使用一些库或插件可能有点过头了。如果您想使用插件或库，那么对于您的情况，我认为骨干形式可以解决问题。它的特点是使用方法调用而不是每次更新字段时更新绑定到表单的模型。