Ember Bootstrap Actions

components.add-record-modal.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
        save() {
          console.log('components/add-record-modal action - save!');
          this.sendAction('save');
        },
        
    		actionTest() {
          console.log('components/add-record-modal action - actionTest!');
          this.sendAction('actionTest');
        }, 
  }  
  
});

components.nav-bar.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  actions: {
        onModalHidden() {
          console.log('nav-bar.js - set modal1 false');
          this.set('modal1', false);
        },

        toggleCreateFolderModal: function () {
          console.log('components/nav-bar action - toggleCreateFolderModal');
          this.toggleProperty('isShowingModal');
        },
    
        save() {
          console.log('components/nav-bar action - save!');
          this.sendAction('save');       
        },
    
        actionTest() {
          console.log('components/nav-bar action - actionTest!');
          this.sendAction('actionTest');
        },    
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Bootstrap Twiddle',
  
  actions: {
        save() {
          console.log('controllers/application action - save!');
          this.send('routeActionTest');  // Fire Action on Route          
        },
    
        actionTest() {
          console.log('controllers/application action - actionTest!');
          this.send('routeActionTest');  // Fire Action on Route
        },     
  }
});

controllers.index.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
        save() {
          console.log('controllers/index action - save!');
        },
    
        actionTest() {
          console.log('controllers/index action - actionTest!');
          this.send('RouteActionTest');  // Fire Action on Route
        },     
  }  
  
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
    actions: {
        save() {
          console.log('routes/index action - save!');
        },
    
        routeActionTest() {
          console.log('routes/index action - RouteActionTest!');
        },     
  }
});

templates.application.hbs

{{ nav-bar actionTest='actionTest' save='save'}}
<h1 style="padding-top:50px;">Welcome to {{appName}}</h1>
<br>
<br>
<div>
{{#bs-button onClick=(action 'save')}}Add Record BS Button{{/bs-button}}
 <a {{action 'actionTest'}} href="#">Basic Link Action Test</a>
</div>
{{outlet}}
<br>
<br>

templates.components.add-record-modal.hbs

{{#bs-modal open=modal1 title="Add New Record" size="lg" onSubmit=(action "save") onHidden=(action onModalHidden) as |modal| }}
    {{#modal.header}}
        <h4 class="modal-title">
            Add New Record
        </h4>
    {{/modal.header}}
    {{#modal.body}}

        <div style="padding-top:10px;">
            <label>Record Title:</label>
            {{input value=name size=60}}
        </div>
    {{/modal.body}}
    {{#modal.footer}}
        {{#bs-button type="success" onClick=(action modal.submit)}}Submit{{/bs-button}}
        {{#bs-button onClick=(action modal.close)}}Cancel{{/bs-button}}
        <a {{action 'actionTest'}} href="#">Basic Link Action Test</a>

    {{/modal.footer}}

{{/bs-modal}}
{{yield}}

templates.components.nav-bar.hbs

{{! app/templates/components/nav-bar.hbs }}
<nav class="navbar navbar-inverse navbar-fixed-top">
        <div id="navbar" style="padding-left:50px;padding-top:10px">
                {{#bs-button onClick=(action (mut modal1) true)}}Add Record with modal{{/bs-button}}
                {{#bs-button onClick=(action 'save') }}Add Record BS Button{{/bs-button}}
                <button onClick={{action 'save'}}>Add Record Basic Button</button>
        </div>
</nav>
{{add-record-modal modal1=(readonly modal1)  onModalHidden=(action 'onModalHidden') onSubmit=(action 'save')  save='save'}}


{{yield}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.11.2",
    "ember-template-compiler": "2.11.2",
    "ember-testing": "2.11.2"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-bootstrap": "1.0.0-alpha.10"
  }
}