我正在使用backbone.stickit 进行模型绑定。如何将预填充选择与模型绑定？

Posted 2023-02-24

【中文标题】我正在使用backbone.stickit 进行模型绑定。如何将预填充选择与模型绑定？

【英文标题】：I'm doing model binding using backbone.stickit. How can I bind a prepopulated select with a model?

【发布时间】：2013-02-25 16:33:09

【问题描述】：

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

【参考方案1】：

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

也就是说，这个请求很常见，我确信支持预呈现的选择选项。你能打开一个new issue，我会在接下来的几天内在master上发布一些东西吗？

编辑：现在正在积极worked on。

【讨论】：

感谢您的努力。我理解您之前将这个功能留在外面的意思，但在某些情况下，我们可以输入更少的代码来预先填充选择而不是在客户端填充它（我在 drupal 上使用它）。