Kann ich Formulareingaben an Modelle in Backbone.js binden, ohne manuell Unschärfeereignisse zu verfolgen?

Question

Ich habe eine backbone.js-Anwendung ( www.github.com/juggy/job-board ), wo ich meine Formulareingaben direkt an mein Modell binden möchte (a la Sproutcore).

Ist es möglich, mit Backbone.js (oder anderen Tools), ohne tatsächlich verfolgen jede Unschärfe Ereignisse auf die Eingänge und aktualisieren das Modell manuell? Dies scheint wie eine Menge von Glue-Code.

Danke,
Julien

Answer 1

Es gibt eine noch bessere Möglichkeit, dies zu handhaben, wenn Ihr Modell viele Eigenschaften enthält.

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

Es besteht eine Abhängigkeit davon, dass Ihre Eingabeelemente eine id haben, die dem Namen der Eigenschaft in Ihrem Modell entspricht.

Answer 2

Ich bin mir nicht sicher, wie SC das macht, aber wahrscheinlich hören sie auch nach Ereignissen.

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

Ich denke, dies ist ein sauberer (und vielleicht schneller) Weg, um ein Objekt aus einem Eingabeelement zu erstellen

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

ohne Jquery:

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

Answer 4

Haben Sie Backbone.ModelBinder ausprobiert? Es ist ein nettes Werkzeug zu tun, was Sie brauchen: https://github.com/theironcook/Backbone.ModelBinder

Answer 5

Ich arbeite an Korsett, ein Formular-Bibliothek für Backbone.js inspiriert von der django-Formulare-Modul, aber ein wenig weniger ehrgeizig im Umfang. Noch arbeiten die Knicke, aber es wird am Ende auf Github, wenn zumindest semi-stabil und funktional.

Das Ziel des Korsetts ist es, leicht unterklassifizierbare Feldklassen zu haben, so dass Sie komplexe Eingaben für komplexere Anwendungsfälle (kaskadierende Auswahlen usw.) erstellen können. Bei diesem Ansatz wird jedes Feld als separate Ansicht gerendert, und die Formularansicht ist an ein Modell gebunden und verwendet Änderungsereignisse, Unschärfeereignisse oder Übermittlungsereignisse zur Aktualisierung des Modells (konfigurierbar, Unschärfe ist Standard). Jede Ansicht hat eine überschreibbare getData-Funktion, die standardmäßig auf die jquery .val()-Funktion zugreift.

Mit sinnvollen Vorgaben und einer modelFormFactory-Funktion verwenden wir Korsett (oder die Teilmenge davon, die tatsächlich schon fertig ist) für die schnelle Entwicklung, definieren ein Modell mit sinnvollen Attributnamen, verwenden modelFormFactory und Sie haben sofort bearbeiten UI.