I know the concept of Data Down / Actions Up, but I'm facing a situation on which I don't know how to do it with the DDAU. I searched on differents forum and blogs how to do it, but it does not fit my request.
I have a controller with two components.
On the first component I have a header with a button.
On the second component I have a form.
When the button is clicked, an action is trigered and catched by the controller, but how can I notify the second component of the "click" on the button on the first component.
An easy solution would have been to include the first component in the second one, but I can't do this because each component are used in many different situations.
You can use services as a bus.
Register an event on second component and trigger that event from first component.
I show it in this twiddle
If you don't want using services you can use parent-child model.
Please take a look at that twiddle
You can pass foo property from controller to both components, and first component to pass action to controller to change foo. Now this sibling component too will be notified and you can make use of didUpdateAttrs hook in sibling component to react to change.
Related
I have an Ember component which is essentially a panel. There can be multiple instances of this panel on a page, but only one can be "active" at any given time. Each instance of the component must be aware if any of the other panels become "active" so they can remove their "active" state. I would really rather not move the JavaScript to make this happen to a parent component. Instead, I would like to keep it within this component. In Angular, I used to use a static variable to do this. What is best way to do this in Ember?
I would really rather not move the JavaScript to make this happen to a
parent component
Do you want to avoid having the parent component dealing with anything related to panel "activity"? If so, why?* If not:
Ember automatically gives each component's tag (unless it's a tagless component) an id that is accessible from the js code as elementId. You could create a property activePanelId on the parent component and pass it to all panels: {{pa-nel activePanelId=activePanelId}} and then check in each panel
{{#if (eq elementId activePanelId)}}
{{!whatever is different on the active panel}}
{{/if}}
or use it in the js code:
isActive: Ember.computed('activePanelId', function() {
return this.get('activePanelId')===this.get('elementId');
},
If the panel becomes active by an action related to itself (e.g. clicking on it), just set activePanelId to the elementId in the respective action - since the property activePanelId exists only once on the parent component, all other panels to which it is passed will take note.
If using the elementId feels to hacky, you might as well give each panel a distinct name and store the activePanelName in the calling component.
*If you really do not want the property in the parent component, you could move it to a service that you then inject into the panel components, but I cannot yet imagine a good reason for preferring that.
#arne.b 's anwser sums it pretty well, the best way of handling component's state with common parent data, but if you are dead serious about not using a parent component there is kind of way to get it done.
Example:
import Ember from 'ember';
export default Ember.Component.extend({
sharedObject: {},
sharedArray: [],
});
In the above component you can use sharedObject or sharedArray to exchange state with multiple instances of the component. Any changes in the object or array will be reflected to all the instances of the same component.
A sample Ember twiddle.
In Data Down, Actions Up approach, what is the best way to scroll to a child component.
I have a collection of pages
{{#each pages as |page|}}
{{single-page model=page}}
{{/each}}
and I want to scrollTo a specific page number.
It would probably be a parent component that wraps what you have now, and looks something like this.
{{scrollable-pages pages=pages activePage=page)}}
Here is a twiddle that just scrolls down to the relevant page.
I'm not sure if you want to handle the scroll event ? In that case, the twiddle and relevant components will need to be expanded.
{{scrollable-pages pages=pages activePage=page onScroll=(action "changeActive")}}
So that you can handle that action and change the active page.
I would even consider another parent component in this case to manage the state, injecting a service with the pages, and handling the scroll change there.
I'm trying to figure out why an Ember component is not working (and trying to learn about component lifecycles in the process). The component in question is Ember-cli-mapbox. It uses nested components. You can have a mapbox-map component, and within that component you can have several mapbox-marker components. Now, how it is supposed to work, is the mapbox-map component initialises the map, and then passes a block to the child marker components. The child marker components then references the map that got passed down to them. An example of the components in use (which come from the component docs):
{{#mapbox-map mapId='ember-cli-mapbox.7c3914f2' as |map|}}
{{#each positions as |position|}}
{{mapbox-marker map=map coordinates=position.coordinates}}
{{/each}}
{{/mapbox-map}}
Now, the components get set up using the didInsertElement hook, which makes sense to me since the DOM needs to be in place before the mapbox-map component can bind to a element in the dom. It doesn't work like that though. The didInsertElement of the child components get executed before the didInsertElement hook in the parent component. So, the marker tries to reference the map before it was created. I figured this out by putting console.logs in the component init code. I can't find much documentation on component lifecycles. didInsertElement does get referenced in the API docs here, but it seems that the newest API docs are actually out of date and don't reference a bunch of other hooks described here. The latter link says that life cycle events happen in the following order:
didInitAttrs
didReceiveAttrs
willRender
didInsertElement
didRender
Now, things get weird. When I replace didInsertElement in the components with didInitAttrs, it fires in the correct order. The didInitAttrs hook on the parent component fires first, followed by the child component didInitAttrs hooks. Problem with this is, the DOM isn't ready yet, so it doesn't help much. I also can't put the map binding event in the Ember runloop, since it need to be returned and passed as a block to the child elements.
So, my questions are:
Why, when using didInsertElement on components, do the hooks get executed in the order they do? (children, then parents)
How did this component ever work in the way it's currently written?
Am I supposed to use the above mentioned hooks if they're not mentioned in the official API docs?
I've recreated the addon in an Ember Twiddle here. Child hooks get called before the parent hooks, causing the component to break since map is undefined when the hook is called. This happens on Ember 1.13.8 as well as 1.13.9.
Why, when using didInsertElement on components, do the hooks get
executed in the order they do? (children, then parents)
This was changed in version 1.8. It was previously parent, then children but this often required people to use some complicated method of waiting for children to render to do certain things. Changing the order made learning Ember simpler.
See https://github.com/emberjs/ember.js/issues/5631 for more information.
How did this component ever work in the way it's currently written?
I have not used this addon, and have no idea if it works or not. I fixed your twiddle to work, however: http://ember-twiddle.com/4c3e55d0a66ead378bdf
Am I supposed to use the above mentioned hooks if they're not
mentioned in the official API docs?
These hooks are not mentioned because the documentation is still catching up to changes in Ember. Feel free to use them if you'd like.
I am rebuilding the Gmail UI for a small project in Ember. I have made the left side bar, the actions at the top(delete, mark as read) and the message list three different components with no parent to child relationship.
I am trying to get the select all action working. I have researched a lot but I don't know how to send the action of selecting a checkbox at the top, to selecting all checkboxes in the message list. Also would I set a property on the component called isChecked? How would the top actions component know about the properties and actions of the message list component without a parent child relationship?
If you need more clarification please ask.
My view contains an element. What is the best way to respond to mouseEnter and mouseLeave events for only that element?
Does ember want me to convert that element into a view?
Does ember want me to call this.$().on('mouseEnter', '.my-child-element', someHandler) and .off it myself in didInsertElement and willDestroyElement respectively?
Or am I missing a more appropriate approach?
There are several ways to approach this, but I always come to the conclusion that you create a view for anything that needs to respond to events. You could also use an action handler for very simple events in a template.
{{action "my_action" on="mousedown"}}
I would still recommend using a view though as you will most likely need to know more info about what happened and want access to the view and models bound to that element.