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.
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.
My question is: Can someone direct me in moving from controller based application to component base application?
I am building a map application for my dog training club. We are specialized in helping finding missing people.
In order to organize our training, we need an application to draw trails and add items on them etc.
I've started an app using Ember-Cli and OpenLayers-3. The application is working nicely, but I would like to move the code from controller based to component base approach.
I would like also to use more routing as at the moment, I have only one route and all user interactions are handled using actions.
I've setup a repository on github for those who would be kind enough to help me:
https://github.com/mylen/mantrailling
if you want to checkout the code and test the app localy, you'll need to modify the referer using a header mod in your navigator to use http://demo.melard.fr
You can see a beta of the website at that page :
http://recherche.utilitaire.melard.fr/beta/map
Thank you in advance,
First, we should clarify the intended uses of components, controllers and routes in ember.js.
Components are similar to Views, but they are isolated and therefore used to create reusable pieces of code, that handle the visual representation of your models.
Controllers are mainly used to decorate your models, but also to hold application state.
Routes represent you current application state. They are responsible for loading your models and to initialize your controllers.
To solve your first problem (controllers -> components), you only need to move all view related stuff, and only this, into components. Your code that decorate your model, for example the active flag of a way-point, remains in the controller. You only need to bind the data of your models/controllers to the components, via embers data binding. (http://guides.emberjs.com/v1.11.0/components/passing-properties-to-a-component)
Your second problem (use routes) is a bit harder to solve, I think. First you need to find all of the states your app currently have. After that, you should move your model loading and saving stuff into this routes.
Edit
Some references describing the problem.
https://github.com/ef4/rfcs/blob/routeable-components/active/0000-routeable-components.md
https://www.youtube.com/watch?v=QgycDZjOnIg
Edit 2
Your question is highly related to How to move ember from 1.x to 2.0, because the changes you mentioned will come along with ember 2.0.
Here are some additional links that describe how to prepare best for this upgrade.
https://gist.github.com/samselikoff/1d7300ce59d216fdaf97
https://speakerdeck.com/tomdale/ember-2-dot-0-in-practice
http://discuss.emberjs.com/t/what-is-a-good-way-to-do-this-in-ember-2-0-no-itemcontroller-no-arraycontroller/6649
You can find a lot of resources if you search for ember 2.0.
Edit 3
Here is I think the most informative source for keeping up with new Ember releases:
https://www.youtube.com/watch?v=wsydQzQF4Ww
When using globals we could have defined App.Controller, App.ObjectController and App.ArrayController to control what class Ember will use to generate controllers.
With EmberCLI, I see documentation for routes - using app/routes/basic.js. This works fine.
Does it also work for views? What about controllers? How would I implement the 'basic' for each kind of controller?
Yes, this works for just about any object Ember would generate, including controllers. If you look here you can see that Ember looks for 3 different types of controllers to generate: basic, object, and array. You can override these defaults by creating the following files:
app/controllers/basic.js
app/controllers/object.js
app/controllers/array.js
Ember is moving away from views and controllers in favor of components. (See the Routable Components section of The Road to Ember 2.0.) To that end, I don't believe Ember-CLI provides the ability to provide a basic implementation of each of these controllers in order to discourage their use. (At least I could not find anything from searching the code base.)
I am brand new to ember... working through the ember guides AND trying to apply that same knowledge through the ember-cli guides simultaneously.
I am noticing there there are a few big gaps in logic between the two when it comes to the ES6 Resolver and it is causing problems for me, particularly when i want to reference things like ApplicationRoute, ApplicationController, and the like.
I have to ask, for my own sanity, how to I define an ApplicationRoute or an ApplicationController? Are they saved as application.js or index.js?
ApplicationRoute would be saved under app/routes/application.js, ApplicationController would be saved as app/controllers/application.js.
as long as those files export default the proper subclassed Route or Controller, respectively, everything should be fine.
When you look at a lot of the older (Pre 1.0) Ember code, it seems like the Handlebars helper is {{#linkTo}} (see, for example this SO post from January 2013). Now, the method seems to be {{#link-to}}, based on the official Ember docs.
I can't find any mention of when the helper method changed. But I just tried both {{#link-to}} and {{#linkTo}} in an app using Ember 1.2 and Handlebars 1.1.2 and both work as expected.
Two questions. When did this change occur? I can't find any mention of it in Handlebars changelogs or anything that mentions it. And 2, I assume that since {{#link-to}} is what's currently in the docs, that's the new way. But there's no deprecation notice. Is there a plan to no longer support {{#linkTo}}? If so, when? Which Ember/Handlebars version? For bonus points, link to a an article that talks about that rationale behind this decision.
You wouldn't find anything about link-to in the changelog for Handlebars since it's a helper class for Ember and not included in the main Handlebars library.
According to the blog post for RC8 the old syntax has been "soft deprecated". The old method is marked with #deprecated in the source but doesn't log anything even if used (not even with Ember.ENV.RAISE_ON_DEPRECATION set).
You will also see there that the old one is kept as a straight alias to the new one with no real implementation of it's own.
Ember.Handlebars.registerHelper('linkTo', Ember.Handlebars.helpers['link-to']);
Since they plan to use semantic versioning (as said in the post for the 1.0 release) for their releases they can't really remove this helper until they hit 2.0 though.
The linkTo and bindAttr are changed to link-to and bind-attr in this pull request. The hyphenated form was used, because is more close to web components custom elements syntax. So use the hyphenated form if avaliable in your current version.