Questions about actions

@IAmAndre wrote:

Hi,

I’m still discovering Ember and I am confused about the way actions are handled. To be more specific, I’m using a Bootstrap dropdown button provided by the ember-boostrap module. I’m looking for a way to have some items sorted depending on the option chosen by the user.

Here’s what the code looks like:

{{#bs-dropdown id="sort" as |dd|}}
   {{#dd.button}}Sort By {{/dd.button}}
   {{#dd.menu as |ddm|}}
       {{#ddm.item action "sortByPrice" low_to_high}}{{#ddm.link-to "index"}}Prix croissant{{/ddm.link-to}}{{/ddm.item}}
       {{#ddm.item}}{{#ddm.link-to "index" onclick="sort_by_price('high_to_low')"}}Prix décroissant{{/ddm.link-to}}{{/ddm.item}}
    {{/dd.menu}}
{{/bs-dropdown}}

As you can see on the second item, I used the very naive way with the normal JS “onclick” attribute, which didn’t work as the attribute wasn’t even displayed on the final HTML.

On the first item, I tried to create an action and pass it “low_to_high” as a parameter. However, I’m unable to have this action performed. I did check the documentation, but I’m a little confused by some aspects of it, and the architecture of the ember-bootstrap module is rather confusing.

I first tried to edit the node_modules/ember-bootstrap/addon/components/base/bs-dropdown.js file. The file starts with

import Component from '@ember/component';
import { computed } from '@ember/object';
import { bind } from '@ember/runloop';
import layout from 'ember-bootstrap/templates/components/bs-dropdown';

And then there is:

export default Component.extend({
layout,
classNameBindings: ['containerClass'],
....
actions: {
// My addition
sortByPrice(param){
  alert("sorting");
},

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

I wasn’t sure if it was the right file to edit and if it was actually used, but making changes to it impacts the actual web page. However, the added new action is never executed.

I then made the same changes to the node_modules/ember-bootstrap/addon/components/base/bs-dropdown/menu/item.js

import Component from '@ember/component';

/**
 Component for a dropdown menu item.
 See [Components.Dropdown](Components.Dropdown.html) for examples.

@class DropdownMenuItem
@namespace Components
@extends Ember.Component
@public
*/
export default Component.extend({
   actions:{
	sortByPrice(param){
      console.log("sorting");
    }
   }
});

So what confuses me is

1. Why do these pages contain “extended” classes, and for example, what links the DropdownMenuItem to all the rest? I assume that there should be a file compiling several other files, but I can’t find any trace of this snippet in the generated JS file.
2. Is there any way to add a classic “onclick” event?
3. In this particular case, what is the relationship between the menu-item and the bootstrap-menu? Would it be possible for instance to use a menu_item outside of a bootstrap_menu

Thank you for going through all this, and feel free to ask me if I missed some explanations.

Posts: 1

Participants: 1

Read full topic