Question

我的ember应用程序需要一个高级多选元素（带搜索功能）。

我喜欢this 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控制器/对象。

This博客文章似乎指向正确的方向，但正如我所说，我还没有找到解决方案，因为我不熟悉（和javascript）。

谢谢。

Answer 1

如果您是初次使用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

ember.js和jQuery-UI多选小部件

1 个答案: