Kann ich binden, ohne manuell Tracking blur Ereignisse Eingaben Modelle in Backbone.js bilden?

Question

Ich habe eine Backbone.js app ( www.github.com/juggy/job-board ), wo ich meine Form Eingänge direkt an meinem Modell (a la SproutCore).

binden möchten

Ist es möglich, mit Backbone.js (oder anderen Tool), ohne tatsächlich an den Eingängen jeweils blur Ereignisse zu verfolgen und das Modell manuell zu aktualisieren? Dies scheint, wie viel Glue-Code.

Danke,
Julien

Answer 1

Ich bin mir nicht sicher, wie SC tut es aber wahrscheinlich für Ereignisse, die sie hören zu.

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 2

Es gibt eine noch schönere Art und Weise zu handhaben, wenn Ihr Modell eine Menge Eigenschaften darin enthält.

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);
    }
 });

Es gibt ein Vertrauen auf Ihre Eingabeelemente eine ID, die die gleichen wie die, was der Name der Eigenschaft im Modell ist.

Answer 3

Ich denke, dies ist ein Reiniger (und vielleicht auch schneller) Weg, um einen von einem Eingangselement zu schaffen

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

ohne jquery:

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

Answer 4

Haben Sie Backbone.ModelBinder versucht? Es ist ein nettes Tool zu tun, was Sie brauchen: https://github.com/theironcook/Backbone.ModelBinder

Answer 5

Ich arbeite an Korsett, eine Formularbibliothek für Backbone.js durch den django Formen Modul inspiriert, aber etwas weniger ehrgeizig in ihrem Umfang. Noch die Knicke ausarbeitet, aber es wird auf Github am Ende, wenn zumindest halb stabil und funktional.

Das Ziel des Korsetts ist leicht subclassed Feld Klassen haben, so dass Sie komplexe Eingaben für komplexere Anwendungsfälle (Cascading wählt, usw.) aufbauen können. Dieser Ansatz macht jedes Feld als separate Ansicht, und die Formularansicht wird auf ein Modell gebunden und Anwendungen ändern Ereignisse, verschwimmen Ereignisse oder Veranstaltungen einreichen das Modell zu aktualisieren (konfigurierbar, blur ist Standard). Jede Ansicht hat eine überschreibbar getData Funktion, dass standardmäßig Karten zur jquery .val () Funktion.

Mit vernünftige Standardwerte und eine modelFormFactory Funktion, die wir verwenden Korsett (oder die Teilmenge davon, die noch tatsächlich der Fall ist) für die schnelle Entwicklung, definieren ein Modell sinnvoll Attributnamen verwenden, verwenden modelFormFactory und Sie haben sofort bearbeiten UI.

Answer 6

Ich habe die folgende Technik auf meiner Seite

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 Rückgrat detailliert Sie auf meinem Blog machen

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

es verwendet den gleichen deklarativen Stil wie die Eigenschaft Ereignisse für die Bindung Formelemente Modellattribute

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

Umsetzung

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

    @

entschuldigt, wenn Sie nicht wie Coffeescript tun. Ich mache. Jeder Mensch ist anders:)