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 控制器/对象。

这篇博文似乎指向了正确的方向，但正如我所说，我还没有找到解决方案，因为我是 ember（和 javascript）的新手。

谢谢你。

4

1 回答 1

2

如果您不熟悉 ember 和 javascript，我强烈建议您不要尝试集成 JQUI 和 ember。JQUI 组件倾向于对 HTML 的外观做出很多假设——任何在意想不到的地方添加标签的框架都会破坏大多数 JQUI 组件。同样，ember 的数据绑定功能无法在由 3rd 方库呈现的 DOM 的一部分上工作。

也就是说，我试了一下。您可以通过使用 unbound helper 来非常接近，如下所示：

<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 回答