Kann ich Formulareingaben an Modelle in Backbone.js binden, ohne manuell Unschärfeereignisse zu verfolgen?

Question

Ich habe eine backbone.js-Anwendung ( www.github.com/juggy/job-board ), wo ich meine Formulareingaben direkt an mein Modell binden möchte (a la Sproutcore).

Ist es möglich, mit Backbone.js (oder anderen Tools), ohne tatsächlich verfolgen jede Unschärfe Ereignisse auf die Eingänge und aktualisieren das Modell manuell? Dies scheint wie eine Menge von Glue-Code.

Danke,
Julien

Answer 1

Ich habe die folgende Technik auf meiner Website entwickelt

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) 

Ich habe die Erweiterungen des Rückgrats, die Sie vornehmen müssen, in meinem Blog beschrieben

http://xtargets.com/2011/06/11/binding-model-attributes-to-form-elements-with-backbone-js/

es wird derselbe deklarative Stil wie bei der Eigenschaft events für die Bindung von Formularelementen verwendet an Modellattribute

und hier ist der eigentliche Code, der die Klasse für Sie in Coffeescript implementiert

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

    @

Entschuldigung, wenn Sie coffeescript nicht mögen. Ich schon. Jeder ist anders :)