我可以将表单input绑定到Backbone.js中的模型，而无需手动跟踪模糊事件？
我有一个backbone.js应用程序（ www.github.com/juggy/job-board ），我想直接将我的表单input绑定到我的模型（一个Sproutcore）。
Backbone.js（或其他工具）可能不实际跟踪input上的每个模糊事件并手动更新模型吗？ 这看起来像很多胶水代码。
谢谢，
朱利安
我不知道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()}); } }); 如果你的模型包含很多属性，还有更好的方法来处理这个问题。
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); } });
有一个依赖于你的input元素的ID与你的模型中的属性名称相同。
我认为这是一个更清洁（也许更快）的方式来创build一个input元素的对象
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); },
你有没有尝试过Backbone.ModelBinder？ 这是一个很好的工具来做你所需要的： https ： //github.com/theironcook/Backbone.ModelBinder
我正在研究corset，一个由django表单模块启发的backbone.js的表单库，但是在范围上有点不那么雄心勃勃。 仍然在解决这个问题，但至less在半稳定性和function性方面，它会在Github上结束。
紧身胸衣的目的是为了让你可以为更复杂的用例（级联select等等）build立复杂的input。 这种方法将每个字段作为单独的视图呈现，而表单视图绑定到模型，并使用更改事件，模糊事件或提交事件来更新模型（可configuration，模糊为默认值）。 每个视图都有一个可覆盖的getData函数，默认映射到jquery .val（）函数。
使用合理的默认值和modelFormFactory函数，我们使用corset（或实际完成的子集）快速开发，使用敏感的属性名称定义模型，使用modelFormFactory，并且您有即时编辑UI。
我在我的网站上创build了以下技术
class FooView extends MyView tag: "div" modelBindings: "change form input.address" : "address" "change form input.name" : "name" "change form input.email" : "email" render: -> $(@el).html """ <form> <input class="address"/> <input class="name"/> <input class="email"/> </form> """ super @ # Instantiate the view view = new FooView model: new Backbone.Model $("body").html(view.el)
我已经详细介绍了你需要在我的博客上做的骨干的扩展
http://xtargets.com/2011/06/11/binding-model-attributes-to-form-elements-with-backbone-js/
它使用与events属性相同的声明式样式将表单元素绑定到模型属性
这里是用coffeescript实现你的类的实际代码
class MyView extends Backbone.View render: -> if @model != null # Iterate through all bindings for selector, field of @modelBindings do (selector, field) => console.log "binding #{selector} to #{field}" # When the model changes update the form # elements @model.bind "change:#{field}", (model, val)=> console.log "model[#{field}] => #{selector}" @$(selector).val(val) # When the form changes update the model [event, selector...] = selector.split(" ") selector = selector.join(" ") @$(selector).bind event, (ev)=> console.log "form[#{selector}] => #{field}" data = {} data[field] = @$(ev.target).val() @model.set data # Set the initial value of the form # elements @$(selector).val(@model.get(field)) super @
Appologies，如果你不喜欢coffeescript。 我做。 每个人都是不同的:)
