Mi può legare formare ingressi ai modelli in Backbone.js senza seguire manualmente gli eventi di sfocatura?

Question

Ho un app backbone.js ( www.github.com/juggy/job-board ) dove voglio legare il mio input del form direttamente al mio modello (alla Sproutcore).

E 'possibile con Backbone.js (o altri strumenti), senza in realtà il monitoraggio ogni evento sfocatura sugli ingressi e l'aggiornamento del modello manualmente? Questo mi sembra un sacco di codice colla.

Grazie,
Julien

Answer 1

Non sono sicuro di come SC fa ma probabilmente ascoltano per gli eventi troppo.

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

C'è un modo ancora più bello per gestire questa situazione se il modello comprende un sacco di immobili a esso.

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

C'è un affidamento sui vostri elementi di input che hanno un id uguale al quello che il nome della proprietà nel modello è.

Answer 3

Credo che questo è un detergente (e forse più veloce) modo per creare un oggetto da un elemento di input

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

senza jquery:

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

Answer 4

Hai provato Backbone.ModelBinder? E 'un buon strumento per fare quello che ti serve: https://github.com/theironcook/Backbone.ModelBinder

Answer 5

sto lavorando su corsetto, una raccolta moduli per backbone.js ispirati dal modulo forme Django, ma un po 'meno ambizioso nella portata. Ancora lavorando i nodi, ma finisce nel github quando almeno semi-stabile e funzionale.

Lo scopo del corsetto è quello di avere classi di campo facilmente sottoclasse in modo che si può costruire ingressi complessi per casi di utilizzo più complessi (Cascading seleziona, ecc). Questo approccio rende ogni campo come vista separata, e la vista maschera è associata a un modello e usi cambiate eventi, offuscamento eventi o inviare eventi per aggiornare il modello (configurabile, sfocatura è difetto). Ogni vista ha una funzione ignorabile getData che per impostazione predefinita associa alla funzione jquery .VAL ().

Utilizzo delle impostazioni predefinite e una funzione modelFormFactory, usiamo corsetto (o il sottoinsieme di esso che è in realtà ancora fatto) per un rapido sviluppo, definire un modello usando nomi degli attributi sensibili, utilizzare modelFormFactory e si ha immediato di modifica dell'interfaccia utente.

Answer 6

Ho creato la seguente tecnica sul mio sito

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) 

ho dettagliato le estensioni al backbone è necessario fare sul mio blog

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

utilizza lo stesso stile dichiarativo come la proprietà di eventi per gli elementi di forma vincolante al modello di attributi

e qui è il codice vero e implementando la classe per voi in 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

    @

scusato se non ti piace CoffeeScript. Lo voglio. Ognuno è diverso:)