¿Puedo obligar a formar entradas a los modelos en Backbone.js sin seguimiento manual de eventos de desenfoque?
-
28-09-2019 - |
Pregunta
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
Solución
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()});
}
});
Otros consejos
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.
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);
},
¿Usted ha intentado Backbone.ModelBinder? Es una buena herramienta para hacer lo que necesita: https://github.com/theironcook/Backbone.ModelBinder
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.
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:)