Puis-je lier à former des entrées modèles Backbone.js sans suivre manuellement les événements de flou?

Question

J'ai une application de Backbone.js ( www.github.com/juggy/job-board ) où je veux lier mes entrées formulaire directement à mon modèle (à la SproutCore).

Est-il possible avec Backbone.js (ou d'autres outils) sans suivi réellement chaque événement de flou sur les entrées et la mise à jour du modèle manuellement? Cela semble beaucoup de code de la colle.

Merci,
Julien

Answer 1

Je ne sais pas comment SC fait, mais probablement ils écouter les événements aussi.

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

Il y a une manière encore plus agréable de gérer cela si votre modèle comprend beaucoup de propriétés en elle.

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

Il y a une dépendance à l'égard de vos éléments d'entrée ayant un identifiant identique à la ce que le nom de la propriété dans votre modèle est.

Answer 3

Je pense que c'est un nettoyant (et peut-être plus rapide) façon de créer un objet à partir d'un élément d'entrée

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

sans jquery:

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

Answer 4

Avez-vous essayé Backbone.ModelBinder? C'est un bel outil pour faire ce que vous avez besoin: https://github.com/theironcook/Backbone.ModelBinder

Answer 5

Je travaille sur corset, une bibliothèque de formulaires pour Backbone.js inspirés par le module de formes django, mais un peu moins ambitieux dans sa portée. Je travaille toujours sur les petits défauts, mais ça va finir sur github quand au moins semi-stable et fonctionnelle.

Le but de corset est d'avoir facilement des cours sur le terrain afin que vous sous-classées pouvez construire des entrées complexes pour les cas d'utilisation plus complexes (en cascade sélectionne, etc.). Cette approche rend chaque champ une vue séparée, et la vue de la forme est liée à un modèle et utilise des événements, changement flou des événements ou soumettre des événements à mettre à jour le modèle (configurable, le flou est par défaut). Chaque vue a une fonction getData par défaut que dérogation possible des cartes à la fonction jquery .val ().

Utilisation de nouveaux paramètres par défaut et une fonction modelFormFactory, nous utilisons corset (ou le sous-ensemble de celui-ci qui est réellement fait encore) pour le développement rapide, définir un modèle en utilisant des noms d'attributs sensibles, utilisez modelFormFactory et vous avez l'interface d'édition instantanée.

Answer 6

J'ai créé la technique suivante sur mon site

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) 

J'ai détaillé les extensions de colonne vertébrale dont vous avez besoin de faire sur mon blog

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

il utilise le même style déclaratif que la propriété des événements pour les éléments de forme contraignante aux attributs modèle

et voici le code réel mise en œuvre de la classe pour vous dans 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 vous ne le faites pas comme coffeescript. Je fais. Tout le monde est différent:)