标签: ember-bootstrap

我们从一个新的应用程序开始，使用Ember 3.8和bootstrap / SASS。似乎有两个可用插件在Ember中支持引导程序，ember-boostrap和ember-cli-bootrap-sassy。

尽管前者为大多数bootstrap功能实现了ember组件，并通过其自己的实现“替换”了原始的bootstrap.js，但对于后者，看来我仍然可以使用所有原始的组件和js实现。

乍一看，我会更熟悉ember-cli-bootrap-sassy，因为我仍然可以使用Web上的所有引导示例，并且拥有“定制”版本的bootstrap.js对我来说似乎有点违反直觉。另外，ember-bootstrap的所有引导功能都没有实现，但是我仍然需要？看来我可能会以使用ember-bootstrap的应用程序结尾，但是对于未实现的事情还使用了各种“变通方法”。

由于我在该领域没有太多经验，因此很高兴获得专家的一些建议和见解。

我正在发现EmberJS并开始将现有网站迁移到此框架.我遇到了基于Bootstrap的下拉列表的问题.这个问题实际上帮助我理解了Ember的概念,但我仍然有一些问题.

我使用了ember-bootstrap模块来生成这个下拉列表(以及其他内容),这里的代码应该是:

{{#bs-dropdown as |dd|}}
  {{#dd.button}}
    Sort by
  {{/dd.button}}

  {{#dd.menu as |ddm|}}
    {{#ddm.item}}{{#ddm.link-to "index"}}Price low to high{{/ddm.link-to}}{{/ddm.item}}
    {{#ddm.item}}{{#ddm.link-to "index"}}Price high to low{{/ddm.link-to}}{{/ddm.item}}
  {{/dd.menu}}
{{/bs-dropdown}}

现在,我希望在用户点击其中一个项目时执行一些javascript代码.检查模块的文档后,我找到了菜单项组件的定义位置,并按如下方式编辑了代码:

export default Component.extend({
  layout,
  classNameBindings: ['containerClass'],

  /* ... */

  actions: {
    // My addition
    sortByPrice(param){
      alert("sorting");
    },
    // End of the addition

    toggleDropdown() {
      if (this.get('isOpen')) {
        this.send('closeDropdown');
      } else {
        this.send('openDropdown');
      }
    },
  },
});

然后我更新了hbs文件,如下所示:

{{#dd.menu as |ddm|}}
   {{#ddm.item action "sortByPrice" low_to_high}}

    {{#ddm.link-to "index"  action "sortByPrice" low_to_high}} …