我可以将表单输入绑定到 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< /a>

Answer 5

我正在开发 corset，这是一个受 django forms 模块启发的backbone.js 表单库，但范围不太宏大。仍在解决问题，但至少在半稳定且功能正常时，它最终会出现在 github 上。

Corset 的目的是轻松地对字段类进行子类化，以便您可以为更复杂的用例（级联选择等）构建复杂的输入。这种方法将每个字段渲染为单独的视图，并且表单视图绑定到模型并使用更改事件、模糊事件或提交事件来更新模型（可配置，默认为模糊）。每个视图都有一个可重写的 getData 函数，默认情况下映射到 jquery .val() 函数。

使用合理的默认值和 modelFormFactory 函数，我们使用 corset （或实际上已完成的它的子集）进行快速开发，使用合理的属性名称定义模型，使用 modelFormFactory 并且您可以即时编辑 UI。

Answer 6

我在我的网站上创建了以下技术

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/< /a>

它使用与 events 属性相同的声明式样式来绑定表单元素
对属性进行建模

，这里是在 CoffeeScript Appologies 中为您实现该类的实际代码

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

    @

，如果您不喜欢 Coffeescript 。我愿意。每个人都不一样:)