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?
Related
I have recently started a new project with the most recent ember-cli (v 2.13 as stated in the topic). I am rather set on generating clean semantic html, and as such don't like the extra div.ember-view that the application generates.
Before I could create the app/views/application.js file with following content:
import Ember from 'ember';
export default Ember.Component.extend({
tagName: ''
});
It simply used the component as application view and got rid of the root tag, however it doesn't seem to work anymore. In fact when debugging the resolver "view:application" doesn't show up at all. Is there a new way of solving this situation? Afaik routable components are not exactly in yet, are they?
Granted, my last ember project was using ember-rails (with ember 2.7), now I'm going for a pure ember-cli project, so a few things might indeed have changed.
How can the same effect be achieved now? Is it just a case of adding a special rule to resolver? Or maybe it can be reached otherwise? I learned that ember docs can be rather lacking when it comes to new obscure features...
Views are removed from the Ember 2.0 API. Have a look at this deprecation https://emberjs.com/deprecations/v1.x/#toc_ember-view.
Regarding your question, you can find related discussions in the below url.
https://github.com/emberjs/ember.js/issues/11486
Implementing tagName: '' is not suggested one. In current situation, you can't remove that extra div created by ember application, since ember needs that. What you can do is, you can just apply CSS style to mitigate this,
:root,
.ember-application,
.ember-application>div {
height: 100%;
}
Views are deprecated in Ember > 2.0. The components do generate a div with div.ember-view class added. You can give custom classes to that component using the classNames property and for the component to be other than a div, specify the element to the tagName property.
The extra div can be eliminated using tagName: " " inside each component but you cannot use this.$() to access the component element. The only option is to customize the div created according to our needs.
For application template, I don't think there is any hack to eliminate the extra div created. It might be required by the eventDispatcher.
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
}
})
I'm trying to create a loading substate for the Application route using the new named substate options added recently, but for some reason, I can't get it to work. Originally, I just had created a simple template, loading.hbs, and it worked automatically, but because of the issues with substates on the application route, some of my UI was still visible. I'd like to correct this now.
I've tried renaming and moving the template around to the following places:
/templates/application_loading.hbs
/templates/application-loading.hbs
/templates/application/loading.hbs
None seem to work though. I don't need any custom routing behavior so the default generated route should do me, unless its a requirement for this to work. Documentation on this feature seems to be sparse. I found the jsbin for this feature and I should be doing it correctly according to it unless there's some issue with ember-cli.
Thank you for any assistance.
DEBUG: -------------------------------
DEBUG: Ember : 1.11.1
DEBUG: Ember Data : 1.0.0-beta.16.1
DEBUG: jQuery : 1.11.2
DEBUG: -------------------------------
I believe that loading.hbs and error.hbs are the application's loading and error substates. Your application-loading.hbs doesn't exist to Ember, which is why it's not working.
As for the additional UI elements: I believe the rest of application.hbs is going to render regardless, so the only suggestion I would have is to nest all those elements one level deeper. It sounds like a big ordeal, but it's actually not that bad:
In router.js:
this.resource('whatever', {path: '/'} function() {
// All your existing routes
});
Then rename application.hbs to whatever.hbs and change application.hbs to just have {{outlet}} in it. This should really change very little else in practice, but it will keep the rest of your UI elements from rendering until loading is complete.
Really should've google it before adding the bounty.
Evidently, this feature is broken. There's a fix already though, just needs to be merged and released.
It looks like you must have a moduleBasedResolver
https://github.com/emberjs/ember.js/blob/06e41ad7ccd28558dd4e651aa070bc06f7757821/packages/ember-application/lib/system/application-instance.js#L153
https://github.com/emberjs/ember.js/blob/b80d66f71d75ad0db9022438ed58a41ac84f45f5/packages/ember-routing/lib/system/router.js#L79
When I look at this value in an ember-cli app it's undefined. Which seems odd because ember-cli is es6 module based.
Then I found this https://github.com/emberjs/ember.js/issues/10756 looks like you can add a route application-loading or hack in moduleBasedResolver onto the registry as a temporary solution.
and
https://github.com/emberjs/ember.js/pull/10944
should fix the issue in the longer term.
It appears you already found this, it did not appear loaded when I wrote this answer. Sorry for the noise.
What's the most correct way to use Ember list view with ember-cli?
The docs still show the {{#collection}} helper, and even though that works, that helper has been deprecated.
I tried using {{#view 'list-view'}}, and it didn't throw any errors, but it also didn't work. I believe it didn't render the itemView.
I didn't tackle whether it should use collection or view, but I did find a way to load list-view into an ember-cli project (when ember-cli is at version 0.0.40 or less).
I submitted the solution as an Ember-CLI pull request. Since it's a version-specific solution, I won't be surprised if they don't merge it, but it might be a "magnet" for even better solutions.
Look in my proposed README under Installation.
I'm trying to test my ember code in my jsFiddle
I set framework to Ember 1.0.0-rc1 and onDomReady
and I added jQuery as a resource.
and I setup basic application template in html and declare application in js.
I think I set very basic of an ember app. but it doesn't work.
What am I missing here?
There is an up to date fiddle/jsbin link in the Ember Contributing document:
https://github.com/emberjs/ember.js/blob/master/CONTRIBUTING.md
It is always up to date with the master version of ember.
Two things are going wrong here.
There is a bug in the way jsFiddle has implemented ember support. First off it should be including jQuery, and also it is loading ember before handlebars. You can see what's going on by right-clicking on the output frame and selecting view-source. As a workaround, manually add references to these libraries.
You've got a typo. Instead of type="type/handlebars" you should specify type="text/handlebars"
Working fiddle here
You should definitely use emberjs.jsbin.com. It has everything already setup.