web-dev-qa-db-de.com

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

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

Ist es mit Backbone.js (oder anderen Tools) möglich, die einzelnen Unschärfeereignisse auf den Eingaben zu verfolgen und das Modell manuell zu aktualisieren? Das scheint viel Klebercode zu sein.

Vielen Dank,
Julien

javascriptjqueryhtmlbackbone.js
62
Julien

Ich bin nicht sicher, wie SC) es macht, aber wahrscheinlich hören sie auch auf Ereignisse.

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

Es gibt eine noch bessere Möglichkeit, damit umzugehen, 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 ist wichtig, dass Ihre Eingabeelemente eine ID haben, die mit dem Namen der Eigenschaft in Ihrem Modell identisch ist.

53
Malcolm Sharman

Ich denke, dies ist eine sauberere (und möglicherweise schnellere) Möglichkeit, 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 Frage:

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

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

12
Bruno Reis

Ich arbeite an Korsett, einer Formularbibliothek für backbone.js, die vom Modul Django= forms inspiriert ist, aber etwas weniger anspruchsvoll ist. Ich arbeite immer noch an den Knicken, aber es wird enden auf Github, wenn mindestens halbstabil und funktionsfähig.

Das Ziel von Korsett ist es, Feldklassen mit einfachen Unterklassen zu erstellen, damit Sie komplexe Eingaben für komplexere Anwendungsfälle (kaskadierende Auswahl usw.) erstellen können. Bei diesem Ansatz wird jedes Feld als separate Ansicht gerendert. Die Formularansicht ist an ein Modell gebunden und verwendet Änderungsereignisse, Unschärfeereignisse oder Übergabeereignisse, um das Modell zu aktualisieren (konfigurierbar, Unschärfe ist Standard). Jede Ansicht verfügt über eine überschreibbare Funktion getData, die standardmäßig der Funktion jquery .val () zugeordnet ist.

Unter Verwendung vernünftiger Standardeinstellungen und einer modelFormFactory-Funktion verwenden wir Korsett (oder die Teilmenge davon, die tatsächlich noch vorhanden ist) für die schnelle Entwicklung, definieren ein Modell unter Verwendung vernünftiger Attributnamen, verwenden modelFormFactory und Sie haben eine Benutzeroberfläche für die sofortige Bearbeitung.

0
Jens Alm

Ich habe die folgende Technik auf meiner Website erstellt

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)

Ich habe die Erweiterungen für das Backbone, die Sie vornehmen müssen, in meinem Blog detailliert beschrieben

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

es verwendet denselben deklarativen Stil wie die Eigenschaft events, um Formularelemente an Modellattribute zu binden

und hier ist der eigentliche Code, der die Klasse für Sie in coffeescript implementiert

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

    @

Entschuldigung, wenn Sie kein Coffeescript mögen. Ich mache. Jeder ist anders :)

0
bradgonesurfing