Giter Club home page Giter Club logo

ember-component-inbound-actions's Introduction

ember-component-inbound-actions

npm version Build Status Ember Version

Send actions to Ember.js components. Inspired by Sam Selikoff's blog post

Questions? Ping me @gavinjoyce

Installation

This is an Ember CLI addon, so all you need to do is

npm install --save-dev ember-component-inbound-actions or ember install ember-component-inbound-actions

Usage Instructions

Add the InboundActions mixin to your component:

import Em from 'ember';
import InboundActions from 'ember-component-inbound-actions/inbound-actions';

export default Em.Component.extend(InboundActions, {
  name: 'Larry David',
  actions: {
    reset: function() {
      this.set('name', '');
    }
  }
});

When declaring your component in a template, include an actionReceiver attribute:

{{name-form actionReceiver=nameForm}}

This allows you to reference the nameForm in your controller and invoke actions on it:

this.get('nameForm').send('reset');

Or use the send helper to invoke actions on your component reference from within the template:

{{name-form actionReceiver=nameForm}}

<button {{action (send nameForm "reset")}}>Reset</button>

Development Instructions

  • git clone this repository
  • npm install
  • bower install

Running

ember-component-inbound-actions's People

Contributors

brandonparsons avatar ember-tomster avatar gavinjoyce avatar patocallaghan avatar samselikoff avatar scottkidder avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

ember-component-inbound-actions's Issues

Getting the return value of the action

I'm in a situation where I need to get the return value of a call to an action (in my case a Promise). Basically I'd like to call the action similar as how you'd call a closure action.

Now I have to resort to something hacky like:

const childComponent = this.get('childComponent').target;      
return childComponent.actions.someAction.call(childComponent);

whereas ideally I'd do something like

return this.get('childComponent.someAction')();

Is this something that you've thought about extending the addon with? I know that Ember.ActionHandler only exposes the send function. I'm not too familiar with the part of Ember.js that implements closure actions but maybe there's a way we could easily mix in that functionality similar to Ember.ActionHandler. Just wanted to get your opinion before I dive into this further :-).

Usage with contextual components

Hi,

first of all: thanks for this addon! ๐Ÿ‘
I'm working on an addon that does form validations based on contextual components, and I'd like to implement a "reset" action that broadcasts an "reset" event from the form to all it's children. However, it seems that only the last child receives the event - I've set up a twiddle that should demonstrate this.

Did i miss something, or is it harder than expected to get this to work?

Thanks in advance!

Release new version

Hi,

I'm developing an addon that is dependent on ember-component-inbound-actions so I am relying on PR #12 (#12) as I don't want prototype extensions enabled in my addon. However, the latest release 0.0.4 does not incorporate this PR. I can point to a specific commit in my package.json but that is not so clean.

Would it be possible to release a new version that includes the latest PRs?

Thanks!

DEPRECATION on 2.18

I've just recently resolved this same deprecation in another addon simply by upgrading ember, and found this one now as well.

DEPRECATION: An addon is trying to access project.nodeModulesPath. This is not a reliable way to discover npm modules. Instead, consider doing: require("resolve").sync(something, { basedir: project.root }). Accessed from: new NPMDependencyVersionChecker (/home/skidder/dev/brokermate/node_modules/ember-component-inbound-actions/node_modules/ember-cli-version-checker/src/npm-dependency-version-checker.js:11:33)

"Asynchronous side-effects" from component unit tests

I'm writing a unit test around a component that uses InboundActions and getting the following error:

Assertion Failed: You have turned on testing mode, which disabled the run-loop's autorun. You will need to wrap any code with asynchronous side-effects in a run

To isolate this to InboundActions, I've eliminated all code in the component. At this point here are the files:

// app/components/bogus-component/component.js
import Component from '@ember/component';
import InboundActions from 'ember-component-inbound-actions/inbound-actions';

export default Component.extend(InboundActions, { });
// tests/unit/component/bogus-component/component-test.js
import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';

module('Unit | Component | bogus-component', function(hooks) {
  setupTest(hooks);

  test('unfiltered', function(assert) {
    this.owner.factoryFor('component:bogus-component').create({});

    assert.ok(true);
  });
});

Version deets:

"ember-cli": "~3.2.0",
"ember-component-inbound-actions": "^1.3.0",

Let me know if you need anything else.

nameForm undefined

Hi, this is probably my mistake but couldn't get it to work. Whenever I do this.get('nameForm').send('something'), I get Cannot read property 'send' of undefined.

I can inspect the actionReciever property on my component but see no nameForm on my controller. What did I miss?

// index.hbs
{{ember-youtube title=model.title actionReciever=nameForm}}

// components/my-component.js
import InboundActions from 'ember-component-inbound-actions/inbound-actions';
export default Ember.Component.extend(InboundActions, {

Using in an each block

Given that this requires setting actionReceiver, how would you make this work when the component is repeated in an each block and you want the event to go to a specific instance of the component?

New release

Could you release a new version containing #29, so we can get rid of the annoying babel deprecation warning?

Using actionReceiver attribute for component causes the component to immediately rerender after being rendered

I don't know if this is expected behavior, but it doesn't "feel" correct.
The behavior that we observe is that components which use this plugin do immediately rerender after being rendered. I created a reproducible case here: https://github.com/Maarius/action-receiver-test

To create the repo I did the following steps:

  1. Create new Ember app using ember new ..
  2. Add ember-component-inbound-actions using ember install ember-component-inbound-actions
  3. Create new component using ember g component action-receiver --pod
  4. Add the inbound actions mixin and logging to the component
  5. Add the component to application.hbs

You can now see in the console that when the component is added using {{action-receiver}}, we see the normal logging of the lifecycle events.

However, when the component is added like {{action-receiver actionReceiver=nameForm}}, we see that immediately after going through the lifecycle events, a rerender happens.

Is that behavior expected? Is there a way to have the component do not rerender immediately?

Binding the actionReceiver of a component breaks concatenatedProperties

Have a component like this:
my-component.js

import Ember from 'ember';
import InboundActions from 'ember-component-inbound-actions/inbound-actions';

export default Ember.Component.extend(InboundActions, {
  concatenatedProperties: ['x'],
  x: ['A'],
  classNames: ['A'],
});

my-component.hbs

<h2>{{caseDescription}}</h2>
x: {{x}}
<br>
classNames: {{classNames}}

And use it like this:
application.hbs

{{my-component
  caseDescription="without binding the actionReceiver"
  x="B"
  classNames="B"
}}

{{my-component
  caseDescription="with binding the actionReceiver"
  x="B"
  classNames="B"
  actionReceiver=actionReceiver
}}

Then the rendered result will be this:

without binding the actionReceiver

x: A,B 
classNames: A,B

with binding the actionReceiver

x: B 
classNames: B

That is, binding the the actionReceiver to the outer context causes the concatenatedProperties to not work.

Twiddle demonstrating the error:
https://ember-twiddle.com/c7842938c40eb9118db2a45e8f4f1292

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.