javascript - Ember 上的点击事件

Question

我正在发现 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}}
      Prix croissant
    {{/ddm.link-to}}

  {{/ddm.item}}
{{/dd.menu}}

这没有用，这就是为什么你我也将它添加*action*到link-to元素中，并在其组件文件上类似地声明了操作。

import LinkComponent from '@ember/routing/link-component';

export default LinkComponent.extend({
  actions: {
    sortByPrice(param){
        alert("sorting");
      console.log("sorting");
      },
  },
});

如您所见，该*link-to*组件扩展了LinkComponent之一。我最终明白，这个元素不可能原生地处理点击事件，正如这个线程中所解释的那样。

出于沮丧，我最终采用了一种不太优雅的方法，但仍然可以解决问题：

{{#bs-dropdown id="sort" as |dd|}}
  {{#dd.button}}
    Sort by
  {{/dd.button}}

  {{#dd.menu as |ddm|}}
    {{#ddm.item action "sortByPrice" low_to_high}}
      <a
        class="dropdown-item"
        onclick="sortByPrice('low_to_high'); return false;"
        href="#"
      >
        Price low to high
      </a>
    {{/ddm.item}}
  {{/dd.menu}}
{{/bs-dropdown}}

现在这是我的问题：

为什么在 Component 文件和 hbs 上定义操作并没有改变结果？
为什么 LinkComponent 不原生处理点击事件？我知道一个链接应该将用户重定向到一个新页面（这仍然是有争议的），但是 DOM 事件仍然被触发，那么 Ember 是否故意忽略它并选择不让开发人员处理它？我想知道这背后的逻辑。
有比我的解决方案更好的方法吗？

谢谢。

score 6 · Accepted Answer

为学习 EmberJS 并发布一个漂亮、明确的问题干杯！

你的错误

永远不要修改里面的代码node_modules/和bower_components/文件夹。如果你真的需要猴子补丁，你可以在初始化程序中完成。但是您的用例不需要猴子修补。
您试图在菜单项组件中定义一个操作，但您在父模板中应用了它。该操作必须在该父级的模板组件/控制器中定义。
此调用不正确：
```
{{#ddm.link-to "index"  action "sortByPrice" low_to_high}}
```
以下是问题：
1. 该ddm.link-to组件应该创建到另一个路由的链接。它似乎不支持将动作传递给它。
2. 您只是将一堆位置参数传递给组件。如果ddm.link-to确实支持接受一个动作，正确的调用应该是这样的：
```
{{#ddm.link-to "index" argName=(action "sortByPrice" low_to_high)}}
```
  在这种情况下，"index"是一个位置参数并且argName是一个命名参数。
3. low_to_high不带引号是对当前范围上定义的属性的引用。您可能指的是一个字符串："low_to_high".
切勿直接在模板中使用 JS 代码。在 Ember 中你不应该这样做：
```
<a onclick="sortByPrice('low_to_high'); return false;">
```
相反，传递一个动作（在本地范围内定义：在组件或控制器中）：
```
<a onclick={{action 'sortByPrice' 'low_to_high'}}>
```
onclick属性名称是可选的。没有属性定义的动作意味着onclick（如果您需要将动作附加到不同的事件，您只需要提供属性名称）：
```
<a {{action 'sortByPrice' 'low_to_high'}}>
```
为了在浏览器中正确设置链接样式，href需要一个属性。但是您不必将值传递'#'给它。在老式应用程序中需要使用井号来防止链接覆盖 URL。Ember 会为您覆盖 URL 覆盖，因此您可以简单地传递一个空的href.

这是最终的正确用法：
```
<a href {{action 'sortByPrice' 'low_to_high'}}>
```

回答您的问题

为什么在 Component 文件和 hbs 上定义操作并没有改变结果？

因为您在不同的范围内定义了它们。

如果在中定义动作app/components/foo-bar.js，则该动作必须在中应用app/templates/components/foo-bar.hbs。

如果在中定义动作app/controllers/index.js，则该动作必须在中应用app/templates/index.hbs。

为什么不原生LinkComponent处理点击事件？我知道一个链接应该将用户重定向到一个新页面（这仍然是有争议的），但是 DOM 事件仍然被触发，那么 Ember 是否故意忽略它并选择不让开发人员处理它？我想知道这背后的逻辑。

在 PWA 中，您不会执行实际的页面重定向。这样的重定向会重新加载整个应用程序。

相反，它LinkComponent会覆盖单击并告诉 Ember 的路由系统执行转换。必须正确设置路由，并且传递给的路由LinkComponent必须存在。

您的目标似乎不是执行转换而是更改变量，因此LinkComponent这里不适用。除非您将排序顺序属性连接到 URL 查询参数，在这种情况下，您可以通过转换到不同的查询参数来更改排序顺序。

有比我的解决方案更好的方法吗？

ember-bootstrap有关使用's 下拉菜单的最简单方法，请参见下文。

一个工作示例

控制器：

export default Ember.Controller.extend({
  isSortAccending: true,

  actions: {
    changeSortDirection (isSortAccending) {
      this.set('isSortAccending', isSortAccending);
    }
  }
});

模板：

<p>
  Current sort order:
  {{if isSortAccending "ascending" "descending"}}
</p>

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

  {{#dd.menu as |ddm|}}
    {{#ddm.item}}
      <a href {{action "changeSortDirection" true}}>
        Price high to low
      </a>
    {{/ddm.item}}

    {{#ddm.item}}
      <a href {{action "changeSortDirection" false}}>
        Price high to low
      </a>
    {{/ddm.item}}
  {{/dd.menu}}
{{/bs-dropdown}}

这是一个工作演示。

javascript - Ember 上的点击事件

1 回答 1

你的错误

回答您的问题

一个工作示例

Related

Reference