javascript - Ember Bootstrap 下拉菜单

Question

我正在尝试使用预先存在的组件在 Ember 中创建 Bootstrap 下拉列表。组件 API 可以在这里找到 Ember Bootstrap Dropdown API 。如何让 Ember 了解用户的选择？如果我不使用该组件，我可以做到这一点，但我希望使用它。这是我所拥有的:

{{#bs-dropdown}}
  {{#bs-button}}
    <strong>Select a File</strong>
  {{/bs-button}}
  {{#bs-dropdown-button}}
    <span class="caret"></span>
  {{/bs-dropdown-button}}
  {{#bs-dropdown-menu}}
    {{#each list as |item|}}
      <li>
        <a value={{item.title}}>{{item.title}}</a>
      </li>
    {{/each}}
  {{/bs-dropdown-menu}}
{{/bs-dropdown}}

谢谢。

Answer 1

您可以触发操作来更新单击的项目。

<li {{action 'clickItem' item}}>

您将数据(项目)向下传递到组件，并将操作向上传递到父组件(数据向下，操作向上)。

App.MyComponent = Ember.Component.extend({
  click: function(item) {
    this.sendAction('clickItem', item);
  }
});

在 Controller 或路由中，您可以处理该操作。

App.IndexRoute = Ember.Route.extend(
  actions: {
    clickItem: function(item) {
      item.set('active', true);
    }
  }
});

在此处查找更多信息 -> https://guides.emberjs.com/v1.10.0/components/sending-actions-from-components-to-your-application/