I am new to EmberJS,
Can someone please explain how EmberJS loads the outlet inside application.hbs?
I know application.hbs is the starting point, from where the router.js will invoked that will call the default resource.
I am lost on how the default resource loads another template into the applcation.hbs.
You seem quite confused. I suggest going through the Ember guide again.
I know application.hbs is the starting point
No, it's the template rendered by the top-level route.
from where router.js will invoked that will call the default resource
Templates do not invoke routes, they are rendered by routes.
I am lost on how the default resource loads another template into the applcation.hbs.
When you visit a route, that route's template is rendered into an outlet in the template corresponding to a higher-level route.
Read this from the url:
http://thetechcofounder.com/getting-started-with-ember-js-using-ember-cli/
A router resource [essentially current url path ] is linked to a template. So the moment that resource is encountered, ember brings in the template that is specified with the router resource and replaces the outlet in the application template.
Related
{{#link-to "login"}}<span {{action 'loginfunc'}}>Login</span>{{/link-to}}
the above code is in my ember signup template , i have linked to login template.
I wanted to call my 'loginfunc' in my login controller, but the complier is checking 'loginfunc' inside the sign up controller, can you please tell me why, i'm a beginner. someone guide me with this.
Welcome to SO as well as the Ember community.
By default, in Ember, the structure for a page (say, signup) would be like,
signup template: UI markup layout
signup route file: Handles the routing and data fetching part
signup controller file: Handles the data processing and act as backing class
The things you refer to in a template will usually be looked up in the backing "controller" file. Hence, if you refer to an action in the signup template will be looked up in the signup controller.
If you want to call a method in login controller after transitioning to login route, try invoking it inside one of the dedicated hooks/events such as setupController, activate etc., inside the login route file.
This is a pretty newbie question. However, in EmberJS, I've found that both of the methods work for linking to the blog page in my application.
<p>{{#link-to 'posts'}} See my blog{{/link-to}}</p>
See my blog
Is it better to use {{link-to}} in EmberJS? How come?
The difference is that the {{link-to}} component will navigate to the specified route within the current running Ember application, while <a href="posts"> will do a new browser request to that location and re-start your Ember app at that route. You should use {{link-to}} since you'll be using the Ember internals to navigate within your single-page application and it will be a smoother user experience.
While they both can work, watch your browser closely and you'll see the anchor tag will give you a page refresh and re-launch your Ember app (though in the right location). Using a {{link-to}} will feel faster since Ember is presenting the new page via javascript rather than restarting after a page refresh. It's the difference between navigating within a single-page application, and jumping into a SPA from an external page.
While Ember does render an anchor tag in place of the {{link-to}} at run-time, it interjects to stop the default anchor tag behaviour. The docs explain it like so:
By default the {{link-to}} component prevents the default browser
action by calling preventDefault() as this sort of action bubbling is
normally handled internally and we do not want to take the browser to
a new URL (for example).
(from https://emberjs.com/api/classes/Ember.Templates.helpers.html#toc_allowing-default-action)
Also, with the {{link-to}} component you can pass a model directly into the route. This is a bit more advanced, but the Ember guides have some good examples.
https://guides.emberjs.com/v2.13.0/templates/links/
I have my problem with link-to help, I want to use it with bootstrap navigation, but I can't manage well active link state, so I'm trying to write a component, but I need to get the current route inside the component, so I can create the html element based on the route.
I searched in the api reference, but didn't find nothing.
PS: I know there is an add-on to do that by I'm doing that to learn the framework.
sorry for my bad English.
/ controller.hbs
{{ my-component controller=this }}
# my-component.coffee
#get('controller.target') # this is the route
If you need the CURRENT route, as opposed to the route associated with the controller that your component is instantiated in, you would inject the application controller into your component, and get the current route.
applicationController: Ember.inject.controller('application')
currentPath: Ember.computed.alias 'applicationController.currentPath'
http://emberjs.com/api/classes/Ember.Controller.html#property_target
I don't understand how it works !? The template application.hbs appear first on every page that I create.
The container has a div#ember365 how is created and were?
The application.hbs is the template rendered and contains a {{yield}} tag. Ember is a Single Page Application (SPA) so the template doesnt reload on clicks. Instead whats inside dynamically changes similar like you would see in jquery partial page updates. Everything is rendered in that template. You should be nesting in that components or other routes. Other routes will appear in your {{yield}} tag.
docs: https://guides.emberjs.com/v2.2.0/templates/handlebars-basics/
in the docs, make sure youre looking at the same version as the version of ember youre working with.
I want there to be a loading spinner shown while my routes are loading but unfortunately none of my templates render until whatever route I'm in is done loading?.
Ember has a built loading route at each resource level (including the root of the app). If you have a long last request at the application route it will block the highest available loading route. http://emberjs.com/guides/routing/loading-and-error-substates/
If a route with the path foo.bar.baz returns a promise that doesn't immediately resolve, Ember will try to find a loading route in the hierarchy above foo.bar.baz that it can transition into, starting with foo.bar.baz's sibling:
http://emberjs.jsbin.com/OxIDiVU/716/edit