Czy mogę powiązać dane wejściowe formularzy z modelami w Backbone.js bez ręcznego śledzenia zdarzeń z rozmyciem?

Question

Mam aplikację backbone.js (www.github.com/juggy/job-board), gdzie chcę powiązać moje dane wejściowe bezpośrednio z moim modelem (a la Sproutcore).

Czy jest to możliwe z Backbone.js (lub innymi narzędziami) bez faktycznego śledzenia każdego zdarzenia rozmycia na wejściach i ręcznego aktualizowania modelu? Wydaje się, że jest to dużo kodu kleju.

Dzięki,
Julien

Answer 1

Nie jestem pewien, jak to robi SC ale prawdopodobnie ich słuchać na imprezach też.

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

Istnieje jeszcze lepszy sposób na obsłużenie tego, jeśli model zawiera wiele właściwości w nim.

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

Istnieje zależność od elementów wejściowych o identyfikatorze identycznym z nazwą właściwości modelu.

Answer 3

myślę, że jest to odkurzacz (i być może szybciej) sposobem utworzenia obiektu z elementu wejściowego

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

bez jQuery:

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

Answer 4

pracuję na gorset, forma biblioteka for backbone.js zainspirowana modułem formularzy django, ale o nieco mniejszym zakresie. Nadal pracuję nad supłami, ale skończy się na githubie, gdy jest przynajmniej częściowo stabilny i funkcjonalny.

Celem gorsetu jest posiadanie łatwo subklasowanych klas pól, dzięki czemu można budować złożone dane wejściowe dla bardziej złożonych przypadków użycia (kaskadowe zaznaczenia itp.). Podejście to renderuje każde pole jako osobny widok, a widok formularza jest powiązany z modelem i używa zdarzeń zmian, rozmycia lub przesłania zdarzeń w celu zaktualizowania modelu (konfigurowalne, domyślne ustawienie "zamazywanie"). Każdy widok ma nadpisywalną funkcję getData, która domyślnie odwzorowuje funkcję .val() jquery.

Korzystając z domyślnych ustawień domyślnych i funkcji modelFormFactory, używamy gorsetu (lub jego podzestawu, który jest już gotowy) do szybkiego opracowania, zdefiniowania modelu przy użyciu sensownych nazw atrybutów, użycia modeluFormFactory i natychmiastowego interfejsu użytkownika.

Answer 5

I stworzył następującą technikę na mojej stronie

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) 

Mam szczegółowe rozszerzenia do szkieletu musisz zrobić na moim blogu

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

używa tego samego stylu jak deklaratywny właściwość events dla elementów formularza wiążącego dla atrybutów modelu

i tutaj jest Rzeczywisty kod implementujący klasę dla Ciebie w 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 jeśli nie podoba coffeescript. Ja robię. Każdy jest inny :)

Answer 6

Wypróbowałeś Backbone.ModelBinder?To dobre narzędzie do robienia tego, czego potrzebujesz: https://github.com/theironcook/Backbone.ModelBinder