我正在使用backbone.stickit進行模型綁定。我如何將預填充的選擇與模型綁定？

Question

我有一個選擇填充選項的表單。我想使用backbone.stickit將其綁定到模型，但文檔顯示如何填充綁定配置上的選擇。我無法找到一種簡單的方法將模型與預先填充的選區綁定。

這是我的HTML

<div id="main"> 
    <form id="formulario"> 
     <input id="test1" type="text" /> 
     <select id="test2"> 
      <option value="0">a</option> 
      <option value="1">b</option> 
     </select> 
    </form> 
    <div id="value-test1"></div> 
    <div id="value-test2"></div> 
</div> 

這是基於文檔的工作示例，但不是我所需要

var Model = Backbone.Model.extend({}); 
var View = Backbone.View.extend({ 
    el: $('#main'), 
    bindings: { 
    '#test1': 'test1', 
    '#value-test1': 'test1', 
    '#test2': { 
     observe:'test2', 
     selectOptions: { 
     collection: function() { 
      return [ 
      {value: 0, label:'a'}, 
      {value: 1, label:'b'} 
      ]; 
     } 
     } 
    }, 
    '#value-test2': 'test2' 
    }, 
    render: function() { 
    this.stickit(); 
    } 
}); 

var model = new Model({test1: 'test', test2: 0}); 
var view = new View({model: model}).render(); 

http://jsfiddle.net/camilosw/nDjHh/

我試圖獲得選項值使用jquery綁定配置的選擇，但不起作用

var Model = Backbone.Model.extend({}); 
var View = Backbone.View.extend({ 
    el: $('#main'), 
    bindings: { 
    '#test1': 'test1', 
    '#value-test1': 'test1', 
    '#test2': { 
     observe:'test2', 
     selectOptions: { 
     collection: function() { 
      options = $("#test2 option").map(function(){ 
      return {value: this.value, label: this.text}; 
      }).get(); 
      return options; 
     } 
     } 
    }, 
    '#value-test2': 'test2' 
    }, 
    render: function() { 
    this.stickit(); 
    } 
}); 

var model = new Model({test1: 'test', test2: 0}); 
var view = new View({model: model}).render(); 

http://jsfiddle.net/camilosw/2EYV7/2

它的工作，但我認爲這將是形成一個爛攤子有許多選擇

window.options = $("#test2 option").map(function(){ 
    return {value: this.value, label: this.text}; 
}).get(); 

var Model = Backbone.Model.extend({}); 
var View = Backbone.View.extend({ 
    el: $('#main'), 
    bindings: { 
    '#test1': 'test1', 
    '#value-test1': 'test1', 
    '#test2': { 
     observe:'test2', 
     selectOptions: { 
     collection: function() { 
      return window.options; 
     } 
     } 
    }, 
    '#value-test2': 'test2' 
    }, 
    render: function() { 
    this.stickit(); 
    } 
}); 

var model = new Model({test1: 'test', test2: 0}); 
var view = new View({model: model}).render(); 

http://jsfiddle.net/camilosw/Y3aEF/1

什麼是綁定一個預填充選擇一個最好的方式模型？

我只用backbone.stickit試過，用另一個庫更容易嗎？

Answer 1

Stickit實際上將值綁定爲數據以選擇選項而不是使用值html屬性。這背後的原因是，在豐富的應用程序中，您通常希望爲選項值使用不同類型的數據。例如，您可能需要一個選項來表示一個JavaScript對象或數組，它不是一個簡單的序列化爲html屬性的值;或者您可能想要將屬性值分配給數字2，但由於類型強制將其保存爲屬性時，它將被轉換爲字符串「2」。此外，由於Stickit將解析/擁有選擇選項，因此讓Stickit呈現選項而不是在兩個位置呈現/處理它（更不用說在模板中迭代很醜陋）是有道理的。

也就是說，這個請求很普遍，我相信支持預渲染選擇選項。你能打開一個new issue，我會在接下來的幾天內向主人解釋一些事情嗎？

編輯：現在正在積極worked on。