Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have an Ember application and want to extend a component to override some functionality, but don't want to change or duplicate the template.
However, if I just import and extend the component, nothing is rendered.
How can I make my extended component render using the template that I extended from?
Thanks to the question answered here How can I share a template between two components using Ember CLI? I was able to add a layoutName to the child component pointing to the parent template and solved my problem.
My code finally looks like this:
import Ember from 'ember';
import ExtendFromComponent from './extend-from';
export default ExtendFromComponent.extend({
layoutName: 'components/extend-from'
});
You must have done something wrong. In Ember 2.0.0 you can create a component which extends from another component(and shares its template) using following ES6 syntax in components/second-component:
import Ember from 'ember';
import ExtendFromComponent from './extend-from';
export default ExtendFromComponent.extend({
// ...
});
It renders fine with template and properties of first component. If you still can't get it right then please add your code to question.
Related
This is a generic question and one that may have even been asked on other forums, such as the Ember forums. But I wanted to add this into StackOverflow.
But my question is why does Ember so often use an # in front of it's libraries. A quick example, using an Ember component in Ember 3.4:
import Component from '#ember/component';
While at the same time, I had an old project from the 2.0 days that was structured like the following:
import Ember from 'ember';
Why does Ember now include an # sign?
That is an NPM scoped package. As the registry has grown naming collisions are increasingly common so scoping packages helps to both keep an organizations brands together and also avoid weirdly named packages when all the good names are already taken.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have an Ember template .hbs file with its controller and route. I do not have a component.js file for it. What is an Ember not-quite-component called?
When you type a URL into your browser, the Ember Router has a route, or routes, that handle that particular URL.
The Route can render a template, assign a model, handle actions, redirect to a new route, etc.
A route's associated Controller can be customized if needed, to handle actions or custom properties, for instance.
If the route renders a Template, a component might then be called in the template, or it might not.
A Component typically encapsulates HTML mark-up and functionality that is intended for reusability in some fashion, or to isolate a subset of concerns. If no JavaScript is needed, a component template can be used individually. If JavaScript is required for additional functionality, a component subclass for the component template would also be necessary.
You could say a controller is "not quite a component", given that it behaves in much the same way as a component. However, the template a controller is associated with, is rendered by its route.
You just named it. "Controller", "Route" and "Template". The template belongs to the controller and the controller belongs to the route. A default controller is magically provided for you if you do not define one, and an empty template is also provided by default. If you are speaking to someone and need to convey what you have, the route can somewhat be assumed since it is the only thing absolutely required to reach a page, thus you can simply say "my controller".
I have a question regarding rendering a route into a component/outlet.
I would like to have a component that sits in the application template that acts like a modal/popover.
When rendering a route, I would like to render the template into the component, and when the content changes, run some logic in the component that opens/closes the popover.
I'm hoping someone can enlighten me on how I would go about doing this?
Currently I have a component in the application template, that has a named outlet inside of it (see below). I can render the route into that named outlet, but I can't figure out how to pick up the changes in the content when it changes. Clicking different links will change the content of that outlet.
Any thoughts? A better way to accomplish what I'm wanting to do?
app/templates/application.hbs
{{#primary-popover}}
{{outlet 'primary-popover'}}
{{/primary-popover}}
/app/profile/route.js
import Ember from 'ember';
export default Ember.Route.extend({
renderTemplate() {
this.render('profile', {
outlet: 'primary-popover'
});
}
});
I think the best way to solve your problem is to use liquid-fire http://ef4.github.io/liquid-fire/#/modals . It's recommended by ember core team library and also is well supported. It has nice modal component which can be triggered with link-to component or via this.transitionTo programmatically.
I am fairly new to Ember.js and trying to use the datepicker component from ember-cli-jquery module (https://www.npmjs.com/package/ember-cli-jquery-ui) in my project.
The issue I'm facing is that I need to run some custom jquery initialization code after the datepicker component loads.
After research for several hours, came across this article http://mavilein.github.io/javascript/2013/08/01/Ember-JS-After-Render-Event/ and this stackoverflow post: Using Ember.js, how do I run some JS after a view is rendered?
The post describes using 'didInsertElement' hook to run any initialization code - however, as I'm using the ember-cli-jquery-ui plugin, I'm not sure how to do this without changing/modifying the code in node_modules/ember-cli-jquery-ui/addon/mixins/jqui-widget.js
I looked at the source code for ember-cli-jquery-ui and it turns out the above mentioned method is already being overridden. Reading through the API documentation on emberjs, it seems like any method can be extended and classses can be re-opened, I'm just not sure how to do it.
Is there a way I can further extend/override that method in my app.js or index.js for instance?
Any help would be greatly appreciated.
You can just extend the component and call the super method. and use this as the new component in you app
//app/components/my-date-picker.js {{my-date-picker}}
import DatePicker from "path/to/picker"
export default DatePicker.extend({
didInsertElement:function(){
//do things before super
this._super(); //this._super() instead of this.super()
//do things after super
}
})
For our ember app we want to test the handlebars helpers. Currently we use the moduleForHelper from this never merged ember-qunit PR. With ember 1.8 beta-1 (which includes the metal-views refactorings) the helper stops working.
I have created the following jsbin that demonstrates the problem.
Any idea what changed that causes the problem or better how it can be solved?