CODEWITHSUNDEEP
ember.js
Chris
Chris

Reputation: 7

Why is my action not triggering inside of a modal with ember js?

Here is my template code:

{{#if showDialog}}
  {{#modal-dialog
    translucentOverlay=true
    containerClass="modal-dialog__container"
    overlayClass="modal-dialog__overlay"
    wrapperClass="modal-dialog"
    }}

    <h1 class="modal-dialog__title">Type your goal here</h1>
    {{input class="settings-row__input"}}

    <div class="wrap_buttons">
      <input {{action "cancelOrgGoal"}} type="button" name="Cancel" value="Cancel" class="btn btn_cancel">
      <input {{action "saveOrgGoal"}} type="button" name="Create" value="Select" class="btn btn_create">
    </div>

  {{/modal-dialog}}
{{/if}}

Here is my js code:

actions: {
    saveOrgGoal() {
      console.log('hi');

      let orgGoal = store.createRecord('organization-goal', {
        description: 'Rails is Omakase',
      });

      orgGoal.save(); // => POST to '/posts'

      this.set('showDialog', true);
    },
    cancelOrgGoal() {
      console.log('hi');
      this.set('showDialog', false);
    }
  }

I am using the addon ember-modal-dialog

When I click on either of the buttons the actions are not triggering and nothing is logged in the js console.

Can anyone see why this is? Am I doing some silly mistake?

Upvotes: 0

Views: 70

Answers (1)

NullVoxPopuli
NullVoxPopuli

Reputation: 65173

Based on your comment about file paths, routes can't have actions that are directly callable from the template.

Without extracting a component, you'd want to define your actions on the controller for that route.

  • The Route - data access - the value of the model hook is what gets passed on to the controller. Nothing from the route is accessible from the template, aside from the model
  • The Controller - supports the template, and can define properties and has access to the model
  • That template is backed by the controller.

Hope this helps! :)

Upvotes: 3

Related Questions