Exploring the world of Ember through engaging click events

Question

Exploring the world of Ember through engaging click events

Exploring EmberJS and in the process of transitioning an existing website to this framework, I encountered a challenge with a Bootstrap-based dropdown. While troubleshooting this issue, I found that it deepened my understanding of Ember's concepts, although I am left with some lingering questions.

To implement the dropdown (alongside other elements), I utilized the ember-bootstrap module. Below is the code snippet for the dropdown functionality:

{{#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}}

I now wish to trigger specific JavaScript code when a user clicks on one of the dropdown items. Referring to the module's documentation, I located and modified the code within the menu item component as shown below:

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');
      }
    },
  },
});

Subsequently, I made updates to the hbs file as follows:

{{#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}}

However, despite these changes, the desired outcome was not achieved. This led me to include the *action* attribute to the *link-to* element and define the corresponding action in its component file as well.

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

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

Upon further investigation, I realized that the *link-to* component extending the LinkComponent does not inherently handle click events, as elaborated in this thread.

Feeling somewhat frustrated, I resorted to a less elegant workaround that served the purpose:

{{#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}}

Here are my inquiries:

Why did defining actions in both the Component file and the hbs file not yield the expected result?
Why doesn't the LinkComponent intrinsically manage click events? While links traditionally redirect users to a new page, DOM events are still triggered. Does Ember purposely overlook this behavior to prevent developers from handling it? Understanding the rationale behind this decision would be beneficial.
Is there a more optimal solution than the one I've implemented?

Thank you.

javascript ember.js ember-bootstrap

Answer 1

Answer №1

Well done on delving into EmberJS and posing an insightful question!

Mistakes to Correct

Avoid altering code inside the node_modules/ and bower_components/ directories. If necessary, use an initializer for any patches. However, your situation does not call for patching.
You tried defining an action in the menu item component, but then applied it in a parent template. The action should be defined in the parent's template component/controller instead.
The way you invoked this is incorrect:
```
{{#ddm.link-to "index"  action "sortByPrice" low_to_high}}
```
Issues with this include:
1. The ddm.link-to component is meant to generate a link to another route and does not appear to support passing an action into it.
2. You're providing positional params to the component without proper syntax. If the component could accept an action, the correct syntax would be:
```
{{#ddm.link-to "index" argName=(action "sortByPrice" low_to_high)}}
```
  In this context, "index" is a position param while argName is a named param.
3. low_to_high without quotes refers to a property within the current scope. You likely intended it as a string: "low_to_high".
Avoid using JavaScript directly in templates. In Ember, this approach should be avoided:
```
<a onclick="sortByPrice('low_to_high'); return false;">
```
Instead, pass an action (defined locally in a component or controller):
```
<a onclick={{action 'sortByPrice' 'low_to_high'}}>
```
The property name of onclick is optional. An action defined without a property implies onclick. Provide the property name only if attaching the action to a different event like so:
```
<a {{action 'sortByPrice' 'low_to_high'}}>
```
To ensure proper styling in browsers, include a href attribute for links. No need to pass a value like '#', as Ember prevents URL overwriting, allowing an empty href.

Correct usage example:
```
<a href {{action 'sortByPrice' 'low_to_high'}}>
```

Answers to Your Queries

Why didn't defining actions in both the Component file and the HBS file alter the result?

This occurred because you defined them in different scopes.

If an action is defined in app/components/foo-bar.js, apply it in

app/templates/components/foo-bar.hbs

.

Similarly, an action from app/controllers/index.js should be used in app/templates/index.hbs.

Why doesn't the LinkComponent natively handle click events? Is there a rationale behind letting the routing system manage transitions instead of developers?

In PWAs, actual page redirects are avoided to prevent app reloads.

The LinkComponent instructs Ember's routing system to initiate a transition instead of conventional clicks. Proper routes must be set up for this mechanism to function effectively.

If your goal is adjusting a variable rather than transitioning, the LinkComponent may not suit your needs. Unless coupling the sort order property to a query parameter allows you to modify the ordering through a new query param transition.

Are there better approaches than my solution?

Explore a simpler method utilizing ember-bootstrap's dropdown feature outlined below.

Functional Demo

Controller:

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

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

Template:

<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}}

View the live demo.

Answer 2

Well done on delving into EmberJS and posing an insightful question!

Mistakes to Correct

Avoid altering code inside the node_modules/ and bower_components/ directories. If necessary, use an initializer for any patches. However, your situation does not call for patching.
You tried defining an action in the menu item component, but then applied it in a parent template. The action should be defined in the parent's template component/controller instead.
The way you invoked this is incorrect:
```
{{#ddm.link-to "index"  action "sortByPrice" low_to_high}}
```
Issues with this include:
1. The ddm.link-to component is meant to generate a link to another route and does not appear to support passing an action into it.
2. You're providing positional params to the component without proper syntax. If the component could accept an action, the correct syntax would be:
```
{{#ddm.link-to "index" argName=(action "sortByPrice" low_to_high)}}
```
  In this context, "index" is a position param while argName is a named param.
3. low_to_high without quotes refers to a property within the current scope. You likely intended it as a string: "low_to_high".
Avoid using JavaScript directly in templates. In Ember, this approach should be avoided:
```
<a onclick="sortByPrice('low_to_high'); return false;">
```
Instead, pass an action (defined locally in a component or controller):
```
<a onclick={{action 'sortByPrice' 'low_to_high'}}>
```
The property name of onclick is optional. An action defined without a property implies onclick. Provide the property name only if attaching the action to a different event like so:
```
<a {{action 'sortByPrice' 'low_to_high'}}>
```
To ensure proper styling in browsers, include a href attribute for links. No need to pass a value like '#', as Ember prevents URL overwriting, allowing an empty href.

Correct usage example:
```
<a href {{action 'sortByPrice' 'low_to_high'}}>
```

Answers to Your Queries

Why didn't defining actions in both the Component file and the HBS file alter the result?

This occurred because you defined them in different scopes.

If an action is defined in app/components/foo-bar.js, apply it in

app/templates/components/foo-bar.hbs

.

Similarly, an action from app/controllers/index.js should be used in app/templates/index.hbs.

Why doesn't the LinkComponent natively handle click events? Is there a rationale behind letting the routing system manage transitions instead of developers?

In PWAs, actual page redirects are avoided to prevent app reloads.

The LinkComponent instructs Ember's routing system to initiate a transition instead of conventional clicks. Proper routes must be set up for this mechanism to function effectively.

If your goal is adjusting a variable rather than transitioning, the LinkComponent may not suit your needs. Unless coupling the sort order property to a query parameter allows you to modify the ordering through a new query param transition.

Are there better approaches than my solution?

Explore a simpler method utilizing ember-bootstrap's dropdown feature outlined below.

Functional Demo

Controller:

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

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

Template:

<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}}

View the live demo.

Exploring the world of Ember through engaging click events

Answer №1

Mistakes to Correct

Answers to Your Queries

Functional Demo

Similar questions

Deletion of input is not permitted

The first Ajax call was successful, but the second Ajax call was unexpectedly sent twice

How can you hide all siblings following a button-wrapper and then bring them back into view by clicking on that same button?

What is the best way to retrieve search queries from suggestqueries.google.com through a fetch request, or is there another method to obtain Google suggestions?

Automated Recommendation Selector

Error: You forgot to close the parenthesis after the argument list / there are duplicate items

Organize the table data based on time

Sending dynamic internationalization resources from Node.js to Jade templates

Unexpected behavior is being observed after incorporating the 'node' environment into my .eslintrc file

Avoiding remote submission in Grails forms: Best practices

Obtain the correct form ID format that is dynamically loaded following the execution of an AJAX function

Using MEAN.JS to Define Query Parameters for Mongo from the Client Controller

Utilizing AngularJS: Executing directives manually

What is the best way to style the header of a table when scrolling in CSS?

Tips for displaying HTML elements using JSON data in React?

Utilize Google Maps API to showcase draggable marker Latitude and Longitude in distinct TextFields

Is there a way to trigger this pop-up after reaching a certain percentage of the page while scrolling?

Looking for the optimal method to display numerous lines of text in HTML, one by one, at intervals of 60 seconds?

What is the most effective way to toggle the visibility of div elements using jQuery?

Unable to post form attribute value after submission