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.
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 started working on Ember js using ember-cli and I want to migrate an existing code written in html, jquery and css. I am not sure if its best to put it in the index.html or application.hbs ?
Probably your application.hbs file. As mentioned in the Ember CLI guide, the index.html file is mostly for addons to inject their scripts. You don't need to go that route though. You can manage your legacy Javascript and CSS using the Broccoli asset pipeline and you can put any legacy/common HTML in your application.hbs file.
It's best to put your code in application.hbs, except of tags which need to be put in <head> tag.
You can see that in index.html you have HTMLBars expression:
{{content-for 'body'}}
It's where your generated HTML application code is put, but first, it's wrapped in ember wrapper div, inside of which your application events are handled.
Imagine that you have put one of your divs in index.html - let's call it .main-div, then - in application.hbs - you've put code which has some Ember logic(so you can't put it in index.html too). Now, imagine you write CSS code to target one of children of .main-div. You target it like this in your CSS: .main-div > .dynamic-div, but it won't work. Why? Ember wrapped contents of application.hbs in its div and it's one level down. That's why it would be against developer intuition to put application HTML code in index.html - it could bite you if you forget that you have one layer more of Ember code even if in your editor you see it should be straight: .main-div > .dynamic-div.
Example of Ember.js wrapper div:
<div id="ember463" class="ember-view">
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.
I've done some example apps in Ember, and now I'm ready for using it in existing application. Its traditional web application (request-response, full reload and some ajax loaded content, no rest/api things)
So lets assume I've few page (urls) like
1 abc.com/home.php
2. abc.com/support.php ,
3. abc.com/support.php?call=meeting
and so on..
so is it possible to use just one url with ember app and rest leave as such untill its ready?
PS: I did try for support.php as this.route("support",{path:"/support.php"}) and have SupportController and support.hbs template but its not working. I'm not sure how to put it in jsfiddle.
Thanks
Include your ember app only on the page that needs it, so only on abc.com/support.php
As far as ember can see, when you go to abc.com/support.php you are on the index page (of the ember app), and you will need to use the index.hbs tempate.