• Stars
    star
    331
  • Rank 122,912 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 8 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Bubble closure actions in routes

WARNING

You probably don't need to use this addon. Most of the use cases you'd use this addon for are perfectly achievable without this addon. Read the following blog post for more info: Ember Best Practices: What are controllers good for?

ember-route-action-helper Download count all time CircleCI npm version

ember-router-action-helper is built and maintained by DockYard, contact us for expert Ember.js consulting.

Credit: @rwjblue's jsbin

Demo: http://jsbin.com/jipani/edit?html,js,output

ember install ember-route-action-helper

The route-action helper allows you to bubble closure actions, which will delegate it to the currently active route hierarchy per the bubbling rules explained under actions. Like closure actions, route-action will also have a return value.

However, returning true in an action will not preserve bubbling semantics. In case you would like that behavior, you should use ordinary string actions instead.

Usage

For example, this route template tells the component to lookup the updateFoo action on the route when its internal clicked property is invoked, and curries the function call with 2 arguments.

{{! foo/route.hbs }}
{{foo-bar clicked=(route-action "updateFoo" "Hello" "world")}}

If the action is not found on the current route, it is bubbled up:

// application/route.js
import Ember from 'ember';

const { Route, set } = Ember;

export default Route.extend({
  actions: {
    updateFoo(...args) {
      // handle action
      return 42;
    }
  }
});

If no action is found after bubbling, an error will be raised. The route-action also has a return value:

// foo/component.js
import Ember from 'ember';

const { Component } = Ember;

export default Component.extend({
  actions: {
    anotherAction(...args) {
      let result = this.get('updateFoo')(...args);

      console.log(result); // 42
    }
  }
});

You may also use in conjunction with the {{action}} helper:

<button {{action (route-action 'updateFoo')}}>Update Foo</button>

Compatibility

This addon will work on Ember versions 1.13.x and up only, due to use of the new Helper implementation.

Installation

  • git clone this repository
  • npm install
  • bower install

Running

Running Tests

  • npm test (Runs ember try:testall to test your addon against multiple Ember versions)
  • ember test
  • ember test --server

Overriding route-action for integration tests

This helper is designed for use in controller templates, not in components. It will not, therefore, resolve route action references in an integration test. If you are using this helper in your components, you can override the helper using a pattern similar to the following:

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
import Ember from 'ember';

moduleForComponent('uses-route-action', 'Integration | Component | uses route action', {
  integration: true,
  beforeEach(assert) {
    this.container
      .registry
      .registrations['helper:route-action'] = Ember.Helper.helper((arg) => {
        return this.routeActions[arg];
      });
    this.routeActions = {
      doSomething(arg) {
        return Ember.RSVP.resolve({arg});
      },
    };
  },
});

Building

  • ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

Legal

DockYard, Inc © 2015

@dockyard

Licensed under the MIT license

Contributors

We're grateful to these wonderful contributors who've contributed to ember-route-action-helper:

More Repositories

1

ember-composable-helpers

Composable helpers for declarative templating in Ember
JavaScript
631
star
2

elixir-mail

Build composable mail messages
Elixir
379
star
3

ember-in-viewport

Detect if an Ember View or Component is in the viewport @ 60FPS
JavaScript
247
star
4

ember-admin

Admin backend for ember-cli projects
JavaScript
243
star
5

ember-service-worker

A pluggable approach to Service Workers for Ember.js
JavaScript
238
star
6

flame_on

Flame Graph LiveView Component and LiveDashboard plugin
Elixir
207
star
7

ember-router-scroll

🗔 Scroll to top with preserved browser history scroll position.
JavaScript
204
star
8

ember-async-button

Async Button Component for Ember CLI apps
JavaScript
173
star
9

ecto_fixtures

Fixtures for Elixir apps
Elixir
169
star
10

inquisitor

Composable query builder for Ecto
Elixir
169
star
11

openid_connect

Elixir
65
star
12

eslint-plugin-ember-suave

DockYard's ESLint plugin for Ember apps
JavaScript
53
star
13

courier

Elixir
53
star
14

ember-cart

Shopping cart primitives for Ember
JavaScript
53
star
15

valid_field

Elixir
48
star
16

rein

Reinforcement Learning tooling built with Nx
Elixir
40
star
17

json_api_assert

Composable assertions for JSON API payload
Elixir
36
star
18

live_view_demo

Forkable repo for entries in Phoenix Phrenzy (https://phoenixphrenzy.com/)
Elixir
33
star
19

ember-service-worker-asset-cache

JavaScript
28
star
20

svelte-inline-compile

JavaScript
27
star
21

ember-cli-custom-assertions

Add custom QUnit assertions to your ember-cli test suite
JavaScript
26
star
22

design-sprints

HTML
23
star
23

ember-app-shell

JavaScript
23
star
24

easing

Elixir
22
star
25

ember-i18n-to-intl-migrator

Migrate ember-i18n to ember-intl
JavaScript
20
star
26

ember-service-worker-index

An Ember Service Worker plugin that caches the index.html file
JavaScript
20
star
27

ember-cli-deploy-compress

Compress your assets automatically choosing the best compression available for your browser targets
JavaScript
18
star
28

laptop-install

Shell
17
star
29

narwin-pack

Package of PostCSS plugins DockYard utilizes for PostCSS based projects!
JavaScript
16
star
30

ember-maybe-in-element

Conditionally render content elsewhere using #-in-element on ember apps
JavaScript
15
star
31

ember-service-worker-cache-fallback

JavaScript
15
star
32

inquisitor_jsonapi

JSON API Matchers for Inquisitor
Elixir
14
star
33

ember-one-way-select

JavaScript
10
star
34

svelte-inline-component

Utility and vite plugin to allow to create your own inline svelte components in tests
JavaScript
9
star
35

canon

All the must-read articles and must-watch videos for the DockYard engineering team.
8
star
36

ember-service-worker-cache-first

JavaScript
7
star
37

qunit-notifications

Web Notifications support for QUnit in-browser test suites
JavaScript
6
star
38

netcdf

Elixir NetCDF Bindings
Rust
6
star
39

auth_test_support

Authentication and authorization test functions
Elixir
4
star
40

plausible_proxy

An Elixir Plug to proxy calls to Plausible through your server
Elixir
3
star
41

broccoli-json-concat

JavaScript
3
star
42

boat-tracker

Elixir
3
star
43

ember-load-css

Ember CLI wrapper for loadCSS
JavaScript
3
star
44

drive-in-privacy-policy

2
star
45

ketch

Simple proof-of-concept web application built with Next.js, Storybook, and Firebase.
JavaScript
1
star
46

courier_web

JavaScript
1
star
47

stylelint-config-narwin

DockYard stylelint configuration
JavaScript
1
star
48

liveview_tailwind_demo

Demo showing TailWind 3 integration in a Phoenix LiveView project
Elixir
1
star
49

ember-qunit-notifications

tomster-ified qunit-notifications
1
star
50

boston_elixir

LiveView Native Workshop for Boston Elixir
Elixir
1
star