0

オプションが入力された選択を含むフォームがあります。backback.stickitを使用してモデルにバインドしたいのですが、ドキュメントには、バインド構成でselectを設定する方法が示されています。事前に入力されたselectでモデルをバインドする簡単な方法が見つかりません。

これは私の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を使用してバインディング構成のselectからオプション値を取得しようとしましたが、機能しません

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属性を使用する代わりに、値をデータとしてselect-optionsにバインドします。この背後にある理由は、リッチアプリでは、オプション値にさまざまなタイプのデータを使用したい場合が多いためです。たとえば、HTML属性にシリアル化するのは簡単な値ではないJavaScriptオブジェクトまたは配列を表すオプションが必要な場合があります。または、属性値を数値2に割り当てたい場合がありますが、属性として保存されるときの型強制のため、文字列「2」に変換されます。また、Stickitはselect-optionsを解析/所有するため、2か所でレンダリング/処理するのではなくStickitにオプションをレンダリングさせるのが理にかなっています（テンプレートでの反復は醜いことは言うまでもありません）。

とは言うものの、このリクエストは十分に一般的であるため、事前にレンダリングされた選択オプションをサポートすると確信しています。新しい号を開いていただけませんか。数日以内にマスターに何かをお届けしますか？

編集：これは現在、積極的に取り組んでいます。

于 2013-02-25T19:37:33.057 に答える