¿Puedo obligar a formar entradas a los modelos en Backbone.js sin seguimiento manual de eventos de desenfoque?

Question

Tengo una aplicación Backbone.js ( www.github.com/juggy/job-board ) donde quiero unir mis entradas de formulario directamente a mi modelo (al estilo de SproutCore).

¿Es posible con Backbone.js (u otras herramientas) sin el seguimiento de eventos en realidad cada uno de desenfoque en las entradas y la actualización del modelo de forma manual? Esto parece como una gran cantidad de código de unión.

Gracias,
Julien

Answer 1

No estoy seguro de cómo lo hace SC pero es probable que escuchar los sucesos también.

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

Hay una manera aún más agradable de manejar esto si su modelo incluye una gran cantidad de propiedades en ella.

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

Hay una dependencia de los elementos de entrada que tiene un id igual que el lo que el nombre de la propiedad en su modelo es.

Answer 3

creo que esto es un limpiador (y tal vez más rápido) manera de crear un objeto a partir de un elemento de entrada

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

sin jQuery:

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

Answer 4

¿Usted ha intentado Backbone.ModelBinder? Es una buena herramienta para hacer lo que necesita: https://github.com/theironcook/Backbone.ModelBinder

Answer 5

Estoy trabajando en corsé, una biblioteca de formularios para Backbone.js inspirados por el módulo de formas de Django, pero un poco menos ambicioso en su alcance. Aún trabajando los problemas, sino que va a terminar en github cuando al menos semi-estable y funcional.

El objetivo del corsé es tener clases de campo fácilmente subclases de modo que se puede construir complejos entradas para los casos de uso más complejos (en cascada selecciona, etc). Este enfoque hace que cada campo como una vista separada, y la vista de formulario está enlazado a un modelo y usos cambiar eventos, falta de definición de eventos o enviar eventos para actualizar el modelo (configurable, falta de definición es por defecto). Cada punto de vista tiene una función getData overrideable que por defecto se asigna a la función jQuery .val ().

El uso de los parámetros por defecto y una función modelFormFactory, podemos usar el corsé (o el subconjunto de él que en realidad está hecho todavía) para un desarrollo rápido, definir un modelo utilizando nombres de atributos sensibles, utilizar modelFormFactory y tiene instantánea editar la interfaz de usuario.

Answer 6

He creado la siguiente técnica en mi sitio

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) 

he detallado las ampliaciones de la columna vertebral que necesita para hacer en mi blog

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

que utiliza el mismo estilo declarativa como la propiedad eventos de elementos de forma vinculante a los atributos de modelo

y aquí está el código real implementación de la clase para ti en 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 si no lo hace como CoffeeScript. Hago. Todo el mundo es diferente:)