javascript - usar - ¿cómo se denomina a una url que transmite parámetros de datos para generar informes?

¿Puedo vincular entradas de formulario a modelos en Backbone.js sin hacer un seguimiento manual de los eventos de desenfoque?

Question

Tengo una aplicación backbone.js ( www.github.com/juggy/job-board ) donde quiero vincular las entradas de mi formulario directamente a mi modelo (a la Sproutcore).

¿Es posible con Backbone.js (u otras herramientas) sin hacer un seguimiento de cada evento de desenfoque en las entradas y actualizando el modelo manualmente? Esto parece mucho código de pegamento.

Gracias,
Julien

Answer 1

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

Answer 2

Creé 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 extensiones de la red troncal que necesitas hacer en mi blog

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

usa el mismo estilo declarativo que la propiedad de eventos para unir elementos de formulario a atributos de modelo

y aquí está el código real implementando 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 te gusta coffeescript. Hago. Todos son diferentes :)

Answer 3

Creo que esta es una manera más limpia (y tal vez más rápida) 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

Estoy trabajando en corset, una biblioteca de formularios para backbone.js inspirada en el módulo de formularios django, pero con un alcance un poco menos ambicioso. Aún estoy resolviendo los problemas, pero terminará en github cuando sea al menos semi-estable y funcional.

El objetivo del corsé es tener clases de campo fácilmente subclasificadas para que pueda crear entradas complejas para casos de uso más complejos (selecciones en cascada, etc.). Este enfoque representa cada campo como una vista separada, y la vista de formulario está vinculada a un modelo y utiliza eventos de cambio, desenfoque de eventos o envía eventos para actualizar el modelo (configurable, el desenfoque es el predeterminado). Cada vista tiene una función getData anulable que se asigna por defecto a la función jquery .val ().

Usando valores predeterminados razonables y una función modelFormFactory, usamos el corsé (o el subconjunto que en realidad está hecho todavía) para un desarrollo rápido, definimos un modelo usando nombres de atributos sensibles, usamos modelFormFactory y tenemos UI de edición instantánea.

Answer 5

Hay una manera aún más agradable de manejar esto si su modelo incluye muchas propiedades.

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 en los elementos de entrada que tienen una identificación igual a la que es el nombre de la propiedad en su modelo.

Answer 6

No estoy seguro de cómo SC lo hace, pero probablemente también escuchen eventos.

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