1

私の ember アプリケーションには、高度な複数選択要素 (検索機能付き) が必要です。

私はこのjQuery-UI Multiselect ウィジェットが好きで、次のコードから始めました。

// app.js
...
App.MultiSelectView = Em.View.extend({
  didInsertElement: function() {
    this._super();
    console.log("Creating multiSelect element");
    $("#mselect").multiselect().multiselectfilter();
  },
});
App.multiSelectView = App.MultiSelectView.create();
...

// index.html
...
<script type="text/x-handlebars" data-template-name="mulselect">
  <select id="mselect" multiple="multiple">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  {{view App.multiSelectView}}
</script>
...

このコードは動作し、ウィジェットを表示します。しかし、値/名前をエンバーコントローラー/オブジェクトにバインドする方法がわかりません。

このブログ投稿は正しい方向を指しているように見えますが、私が言ったように、私は ember (および javascript) が初めてなので、まだ解決策を見つけていません。

ありがとうございました。

4

1 に答える 1

2

ember と javascript を初めて使用する場合は、JQUI と ember を統合しようとしないことを強くお勧めします。JQUI コンポーネントは、HTML がどのように見えるかについて多くの仮定を立てる傾向があります。予期しない場所にタグを追加するフレームワークは、ほとんどの JQUI コンポーネントを壊します。同様に、ember のデータ バインディング機能は、サード パーティのライブラリによってレンダリングされている DOM の一部では機能しません。

そうは言っても、私はそれを試してみました。次のようにバインドされていないヘルパーを使用すると、かなり近づくことができます。

<select id="mselect" multiple="multiple">
  {{each option in controller}}
    <option>{{unbound option.txt}}</option>
  {{/each}}
</select>

ここに部分的な解決策を投稿しました：http://jsbin.com/uxarij/13/edit

于 2013-01-21T22:36:19.553 に答える