我可以将表单输入绑定到Backbone.js中的模型而无需手动跟踪模糊事件吗？

Question

我有一个backbone.js应用程序(www.github.com/juggy/job-board),我希望将表单输入直接绑定到我的模型(la Sproutcore).

是否可以使用Backbone.js(或其他工具)而无需实际跟踪输入上的每个模糊事件并手动更新模型？这似乎是很多胶水代码.

谢谢,
朱利安

Answer 1

如果您的模型中包含许多属性,则可以使用更好的方法来处理此问题.

SampleView = Backbone.View.extend({
    el: "#formEl",

    events: {
        "change input": "changed",
        "change select": "changed"
    },

    initialize: function () {
        _.bindAll(this, "changed");
    },

    changed:function (evt) {
       var changed = evt.currentTarget;
       var value = $(evt.currentTarget).val();
       var obj = {};
       obj[changed.id] = value;
       this.model.set(obj);
    }
 });

依赖于您的输入元素,其id与模型中属性的名称相同.

Answer 2

我不确定SC是如何做到的,但可能他们也在听事件.

window.SomeView = Backbone.View.extend({
  events: {
    "change input.content":  "contentChanged"
  },
  initialize: function() {
    _.bindAll(this, 'contentChanged');
    this.inputContent = this.$('input.content');
  },
  contentChanged: function(e) {
    var input = this.inputContent;

    // if you use local storage save 
    this.model.save({content: input.val()});

    // if you send request to server is prob. good idea to set the var and save at the end, in a blur event or in some sync. maintenance timer.
    // this.model.set({content: input.val()});
  }
});

Answer 3

我认为这是一种从输入元素创建对象的更清晰(也许更快)的方法

changed: function(evt) {
  var target = $(evt.currentTarget),
      data = {};
  data[target.attr('name')] = target.val();
  this.model.set(data);
},

没有jquery:

changed: function(evt) {
  var target = evt.currentTarget,
      data = {};
  data[target.name] = target.value;
  this.model.set(data);
},

Answer 4

你试过Backbone.ModelBinder吗？这是一个很好的工具来做你需要的:https://github.com/theironcook/Backbone.ModelBinder