I have just started to follow some tutorials and suddenly got a problem with displaying a template.
I can't display any template other than the default one.
The following code is placed just after the default handlebar (which is doing well) in the index.html->body:
<script type="text/x-handlebars" data-template-name='myTemplateName'>
<h2>Why can not I just be shown?</h2>
</script>
I had created a view file which is referenced in the index.html correctly:
MovieTracker.ApplicationView = Ember.View.extend({
templateName: 'application'
});
MovieTracker.ApplicationView = Ember.View.extend({
templateName: 'myTemplateName'
});
The problem is that I'm not getting any errors (checked with firebug console),
but the content of 'myTemplateName' isn't shown.
Why can't I add my own templates, while the default one works fine?
I'll appreciate a lot your help, It's very important to me,
and I searched all over the internet without finding anything.
Has your application template got an {{outlet}} ? Where are you linking to your template?
{{#link-to 'myTemplateName'}}Your Template{{/link-to}}
Have you set up a route?
App.Router.map(function() {
this.route("myTemplateName", { path: "/myTemplateName" });
});
Once the handlebars link to is clicked it should populate your {{outlet}} in your main template with the correct template.
Related
Something I've been experimenting around with Ember for a couple of hours and can't work out. Hopefully it's just a terminology issue that I'm getting stumped on as I read through the Ember docs.
I have an application, that, for the most part, consists of a sidebar/top bar (called wrapper), and a footer.
My basic application.hbs looks like this (I'm using Ember App Kit to provide structure):
{{partial "wrapper"}}
{{outlet}}
{{partial "footer"}}
If this was the state of my application, it would work pretty well. Page content loads in the {{outlet}} fine.
My main issue is how to break out of this template structure in an "Ember" way (and preferably without going all jQuery and removing DOM elements willy-nilly).
I have a few routes that I don't want the wrapper and the footer to show on (they're full page login/forgot password routes, and a couple of minimal interface/no distractions modes).
I experimented with trying to remove the sidebar and footer by making the default template (application.hbs):
{{#if showWrappers}}
{{partial "wrapper"}}
{{/if}}
{{outlet}}
{{#if showWrappers}}
{{partial "footer"}}
{{/if}}
Where showWrappers is in the ApplicationController:
export default Ember.Controller.extend({
showWrappers: function() {
var routes = ['login'],
currentPath = this.get('currentPath'),
show = true;
routes.forEach(function(item) {
var path = new RegExp('^' + item + '*');
if (!Ember.isEmpty(currentPath.match(path))) {
show = false;
}
});
return show;
}.property('currentPath'),
});
Attemping to transition to /login from / using {{link-to}} returns in an error: Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM presumably because I'm removing things Ember wanted to keep (I am using {{link-to}} and {{bind-attr}} in the sidebar, so there are bindings there).
Aware that I could use actions and jQuery to hide elements of the page and bring them back for the "distraction free" mode, but I'd prefer to learn how to structure templates and use Routes with the renderTemplate hook potentially using this.render (?) to blow away the current DOM and rebuild from a different base (rather than application.hbs).
Thoughts? More than happy to clarify.
I have discovered disconnectOutlet, and have converted my partials into outlets:
{{outlet wrapper}}
{{outlet}}
{{outlet footer}}
Made my ApplicationRoute render to them by default:
export default Ember.Route.extend({
renderTemplate: function() {
this.render();
this.render('wrapper', {
outlet: 'wrapper',
into: 'application'
});
this.render('footer', {
outlet: 'footer',
into: 'application'
});
}
});
and then on the LoginRoute, I just run this.disconnectOutlet for both wrapper and footer, and seems to work pretty well.
I'm a newbie yet on EmberJS, started to learn a week ago. Well, I have some .html file named contactsTemplate.html that is a template what I want to use. Something like this below:
<script type="text/x-handlebars" data-template-name="contacts">
<h2>My Contact List</h2>
{{#each contact in contactList}}
{{contact.name}}
{{/each}}
</script>
Great. I have a index.html file that contains an {{outlet}} expression. It means that every new content will be loaded into this space, right?
<script type="text/x-handlebars" data-template-name="application">
<h1>My Application</h1>
{{outlet}}
</script>
Ok... To manage this template named application, I've created a Controller object.
App.ApplicationController = Ember.ObjectController.extend({
...
});
Same to contacts template:
App.ContactsController = Ember.Controller.extend({
contactList: []
});
I've created two routes to manage this transition between pages:
App.Router.map(function() {
this.route("index", "/");
this.route("contacts", "/contacts");
});
My doubt is:
How can I associate this separated files to a route? I mean, when I call on browser http://mysite.com/ the index.html file should be loaded. When I call http://mysite.com/#/contacts the contactsTemplate.html should be loaded.
Sorry for the long text, and thanks for any help!
By default each declared this.route(routeName) in Router map, will have a [routeName]Controller, [routeName]Route, and expect a [routeName] template, following these conventions described in http://emberjs.com/guides/concepts/naming-conventions/.
To change from one route to other, you can use:
Inside of a controller this.transitionToRoute(routeName)
Inside of a route this.transitionTo(routeName)
Inside of a template {{#link-to "routeName" }}My route{{/link-to}}
You can find more information in the routing guide http://emberjs.com/guides/routing
I hope it helps
Following the Ember guide on templates I do the following:
App.PostsView = Ember.View.extend({
template: Ember.Handlebars.compile('I am the template')
});
But nothing is rendered. When I use the templateName the view is rendered:
// html
<script type='text/x-handlebars' data-template-name='posts-template'>
<h1>I am the template</h1>
</script>
// js
App.PostsView = Ember.View.extend({
templateName: 'posts-template'
});
How can I get the templates to work using the template function as stated in the guides?
edit:
I did come across these:
emberjs template compile doesn't work in rc1
How do I specify using a view with a compiled handlebar in ember.js RC1
So this might look like a duplicate. However, this first appears to use some extra work not specified in the Ember guides and the second is what I am doing but it is not working.
OK, this works:
Ember.TEMPLATES['posts-template'] = Ember.Handlebars.compile('I am the template');
App.PostsView = Ember.View.extend({
templateName: 'posts-template'
});
What was happening in our was that our pre-compiled templates were being added to Handlebars.templates and not Ember.TEMPLATES along with the fact that we were returning the complied template using this, e.g.:
App.PostsView = Ember.View.extend({
template: Handlebars.templates['posts-template']
});
So it seems as though one should refrain from interfering with the template function but rather always use the templateName which will be looking for that name in Ember.TEMPLATES.
Hopefully this helps someone save some time :)
You can also specify the expected templateName along with the actual template contents:
App.PostsView = Ember.View.extend({
templateName: 'posts',
template: Ember.Handlebars.compile('I am the template')
});
JSBin example
I'm extremely new to ember.js and am hitting a wall. I'm using ember.js 1.0.0-pre4
My app.js has the following setup:
window.App = Ember.Application.create();
App.Router.map(function() {
this.route("dashboard", {path: "/"});
});
App.DashboardRoute = Ember.Route.extend({
})
I tried doing something like this on the application template (Ember.TEMPLATES['application'])
{{#linkTo "dashboard"}}Dashboard{{/linkTo}}
And it gives me Uncaught Error: Could not find property 'linkTo'. I tried {{view}} as well as other helpers but all gave me the same could not find property error.
jsfiddle: http://jsfiddle.net/gBf42/
Aha, I found the problem! When you use Handlebars.compile it uses the handlebars script instead of the Ember script. Ember has its own handlebars object that extends the original Handlebars object with extra templates. One such template is the {{#linkTo ...}} template.
So to fix, all you have to do is use Ember.Handlebars instead:
Ember.TEMPLATES["application"] = Ember.Handlebars.compile("{{#linkTo 'dashboard'}}Dashboard{{/linkTo}}")
I can't understand something in Ember.js, my contains a property, but in order to display it i have to do {{view.property}}, why can't I simple use {{property}} ?
in the following example only {{view.test}} is displayed.
shouldn't the view be the default scope ?
index.html:
<script type="text/x-handlebars" data-template-name="places">
{{test}} {{view.test}}
</script>
app.js:
App.PlacesController = Ember.ArrayController.extend({
});
App.PlacesView = Ember.View.extend({
templateName: 'places',
test: 'test'
});
As of Ember 1.0pre, the context for handlebars helpers in your template has been changed to be the controller.
Before that, it was the view. The view keyword is available to access properties from the view.
Try adding a test property to your controller and see what happens.