I have an app with a number of components on the page. I'd really like to know what component a given deprecation is related to. Is there a way to map an outlet to a component?
In other words if I get:
A property of <frontend#view:-outlet::ember673> was modified inside
the didInsertElement hook. You should never change properties on
components, services or models during didInsertElement because it
causes significant performance degradation.
What component is being used for ember673 ?
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.
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.
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 creating ember components for simple form elements with validations and proper styling with bootstrap. I am aware of ember validation libraries but I am doing this to better understand ember components.
Here is the jsbin link for the app.
http://jsbin.com/natuq/12/edit?html,js,console,output
How come I don't see and values? Is the property naming wrong or is it something else?
Thanks
The value property you are trying to log in App.AecFormComponent is actually a property on the App.AecInputComponent instance. That is why you don't see the value being logged.
You can observe this by adding the following observer (no pun intended):
App.AecInputComponent = Em.Component.extend({
logValueChange: function() {
console.log(this.get('value'));
}.observes('value'),
});
This is expected behavior because components create controller-like scope inside of their handlebars blocks. You could set up an Ember binding between the two properties to link them or bind the property of the input to view.parentView.value or something like that (though that's hacky).
I have an existing DetailController and DetailView in my app that has some pretty complicated UI / data manipulation logic (hotkeys, copy paste, duplication, autocomplete, etc) -- the view sends UI events to the controller; the controller handles the logic.
I want to convert this to an Ember component.
Does this basically mean I merge the view and controller into DetailComponent? This seems messy and wrong to me.
If not, how do I use controllers and views internally within a component? That is, I still want the complete isolation and well-defined public interface of the component, but internally within the component, I'd like to use controllers and views for organization. Is that possible?
Is it possible to use {{render}}, {{view}}, {{partial}} within the component template?
Does this basically mean I merge the view and controller into DetailComponent? This seems messy and wrong to me.
Yes that is what it means.
internally within the component, I'd like to use controllers and views for organization. Is that possible?
So component basically replaces a single view/controller pair. Beyond that a component is just an extension of Ember.View and can be organized just like any other view.
Is it possible to use {{render}}, {{view}}, {{partial}} within the component template?
Yes. Any of those helpers will work.