0

我有一个带有选项的表单。我想使用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，使用另一个库更容易吗？

4

1 回答 1

4

Stickit 实际上将值作为数据绑定到选择选项，而不是使用 value html 属性。这背后的原因是，在富应用程序中，您经常希望将不同类型的数据用于选项值。例如，您可能需要一个选项来表示一个 JavaScript 对象或数组，这不是一个容易序列化为 html 属性的值；或者您可能希望将属性值分配给数字 2，但由于类型强制，当它保存为属性时，它将被转换为字符串“2”。此外，由于 Stickit 将解析/拥有选择选项，因此让 Stickit 渲染选项而不是在两个地方渲染/处理它是有意义的（更不用说在模板中迭代是丑陋的）。

也就是说，这个请求很常见，我确信支持预渲染的选择选项。你能开一个新的问题，我会在接下来的几天内得到一些关于主人的东西吗？

编辑：现在正在积极开展这项工作。

于 2013-02-25T19:37:33.057 回答