Puis-je lier les entrées d'un formulaire de modèles Backbone.js sans un suivi manuel de flou événements?

Question

J'ai un backbone.js app (www.github.com/juggy/job-board) où je veux lier mon entrées d'un formulaire directement à mon modèle (à la Sproutcore).

Est-il possible avec Backbone.js (ou autres outils) sans réellement le suivi de chaque flou événements sur les intrants et la mise à jour du modèle manuellement? Il semble que beaucoup de colle de code.

Merci,
Julien

Answer 1

Il est même plus agréable façon de gérer cela si votre modèle comprend de nombreuses propriétés.

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 à votre entrée des éléments ayant un id le même que le nom de la propriété dans votre modèle.

Answer 2

Je ne suis pas sûr de savoir comment SC ne, mais probablement ils écouter les événements de trop.

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 3

Je pense que c'est plus propre (et peut-être plus rapide) pour 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é de la colonne vertébrale.ModelBinder? Ses un bel outil pour faire ce que vous avez besoin de: https://github.com/theironcook/Backbone.ModelBinder

Answer 5

Je suis en train de travailler sur le corset, une bibliothèque de formulaires pour backbone.js inspiré par django formes module, mais un peu moins ambitieuse. Toujours régler les problèmes, mais ça va finir sur github lorsqu'au moins semi-stable et fonctionnel.

Le but de corset est d'avoir facilement sous-classé champ des classes de sorte que vous pouvez générer des entrées complexes pour les plus complexes des cas d'utilisation (en cascade sélectionne, etc). Cette approche rend chaque champ distinct pour la vue, et la vue de formulaire est lié à un modèle et utilise les événements de changement de flou, d'événements ou de soumettre des événements pour mettre à jour le modèle (configurable, le flou est par défaut). Chaque point de vue a un remplacable fonction getData que par des cartes par défaut de jquery .fonction val ().

À l'aide des valeurs par défaut raisonnables et un modelFormFactory fonction, nous utilisons corset (ou le sous-ensemble de ce qui est réellement fait encore) pour un développement rapide, de définir un modèle en utilisant des attributs de noms, utilisez modelFormFactory et vous avez instantanément modifier l'INTERFACE utilisateur.