我可以將表單輸入綁定到Backbone.js中的模型而無需手動跟蹤模糊事件嗎？

Question

我有一個backbone.js應用程序（www.github.com/juggy/job-board），我想直接將我的表單輸入綁定到我的模型（一個Sproutcore）。

Backbone.js（或其他工具）可能不實際跟蹤輸入上的每個模糊事件並手動更新模型嗎？這看起來像很多膠水代碼。

感謝，
朱利安

Answer 1

我不知道SC是怎麼做的，但可能他們監聽事件了。

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

如果你的模型包含很多屬性，還有更好的方法來處理這個問題。

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

有一個依賴於您的輸入元素有一個id與您的模型中的屬性的名稱相同。

Answer 3

我覺得這是一個更清潔的（也許更快）的方式來從輸入元素

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

創建一個對象而jQuery的：

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

Answer 4

我工作的束腹，一種形式backbone.js的庫靈感來自於django的表單模塊，但是在範圍上有點不那麼雄心勃勃。仍然在努力解決這個問題，但至少在半穩定和功能性方面它會在Github上結束。

緊身胸衣的目的是有輕鬆的子類的領域類，以便您可以構建複雜的輸入更復雜的用例（級聯選擇等）。此方法將每個字段呈現爲單獨的視圖，而表單視圖綁定到模型並使用更改事件，模糊事件或提交事件以更新模型（可配置，模糊爲默認）。每個視圖都有一個可覆蓋的getData函數，它默認映射到jquery .val（）函數。

使用敏感的默認值和modelFormFactory函數，我們使用corset（或實際完成的子集）進行快速開發，使用敏感屬性名稱定義模型，使用modelFormFactory並且您有即時編輯UI。

Answer 5

我創建了下面的技術在我的網站

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) 

我已經詳細介紹您需要在我的博客擴展到骨幹

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

它使用相同的聲明風格將表單元素 綁定到模型屬性的事件屬性

並且這裏是實際的代碼在你的咖啡文本中實現你的類

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 

    @ 

如果你不喜歡coffeescript，我做。每個人都不同:)

Answer 6

您是否嘗試過Backbone.ModelBinder？這是一個很好的工具來做你所需要的：https://github.com/theironcook/Backbone.ModelBinder