I'm doing model binding using backbone.stickit. How can I bind a prepopulated select with a model?

Question

I have a form with a select populated with options. I want to bind it to a model using backbone.stickit but the documentation show how to populate the select on the binding configuration. I can't found an easy way to bind the model with my prepopulated select.

This is my 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>

This is a working example based on the documentation, but not what I need

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/

I tried to obtain the option values from the select on the binding configuration using jquery but doesn't work

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

It worked, but I think it will be a mess on forms with many selects

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

What is the best way to bind a prepopulated select to a model?

I tried only with backbone.stickit, it's easier with another library?

Answer 1

Stickit actually binds values as data to select-options instead of using the value html attribute. The reasoning behind this is that in rich apps, you often want to use different types of data for option values. For example, you may want an option to represent a JavaScript Object or Array which is not an easy value to serialize to an html attribute; or you may want to assign the attribute value to the Number 2, but because of type coercion when it is saved as an attribue it will be converted to the String "2". Also, since Stickit is going to parse/own the select-options, it makes sense to let Stickit render the options instead of rendering/processing it in two places (not to mention iterating in a template is ugly).

That said, this request is common enough that I'm convinced to support pre-rendered select-options. Can you open a new issue, and I'll get something out on master within the next couple of days?

EDIT: This is being actively worked on, now.