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
Related
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.
Named templates seem straightforward enough on paper, but for the life of me I can't make it work with emberjs 1.0, even with a trimmed down example (See jsbin here: http://jsbin.com/uNUQUhi/1/).
The handlebar templates:
<script type='text/x-handlebars' id='index'>
<div>{{outlet test}}</div>
</script>
<script type='text/x-handlebars' data-template-name='test'>
<h1>A test</h1>
</script>
...and the javascript:
App = Ember.Application.create() ;
App.IndexRoute = Ember.Route.extend({
renderTemplate: function(controller, model) {
this.render('test', {
outlet:'test',
into: 'index'
});
}
});
I must be missing something? But what? I couldn't find a working example of a named outlet (at least not one that worked with v.1.0)
The 'index' template would be the 'normal' template that would be rendered by IndexRoute. Since you're telling it to render the 'test' instead, the 'index' template is never rendered, and as a result Ember can't find your named outlet. If you rename the 'index' template to 'application', and the render into : 'application' everything works out.
http://jsbin.com/oLULeRo/1/edit
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 am trying to port a pre2 application to 1.0.0 rc. They way my application is setup is as follow: all my templates are compiled into their own view.
So my code looked like this:
App.NewUserController = Em.Controller.extend({});
App.NewUserView = Em.View.extend({
template: Em.Handlebars.compile(NewUserHtml)
});
NewUserHtml is a html/handlebars file loaded through require.js.
Since the file is directly compiled into the template it doesn't include a <script type="text/x-handlebars"…>tag.
I understand that I need to override the render function of my route, but the options I have seen seem to require that I specify a template and I don't really have one. In my case since the template is already in my view, I am looking for a way to just specify the view to use.
I am probably doing something fundamentally anti-rc 1.0...
Any guidance would be appreciated.
Given that NewUserHtml is just plain text with handlebars tags, you should be able to do something like this in your view:
Ember.TEMPLATES['NewUser'] = Handlebars.compile(NewUserHtml);
App.NewUserView = Ember.View.extend({
templateName: 'NewUser'
});
or
App.NewUserView = Ember.View.extend({
template: Handlebars.compile(NewUserHtml)
});
or
App.NewUserView = Ember.View.extend({
templateName: 'some-other-template'
});
You can read more about views here, 'templates' section.
In the latest ember master build, I'm trying to declare a template similar to this:
App.IndexView = Ember.View.extend({
template: Ember.Handlebars.compile('Index template in code')
});
..and it's not working. Using identical code and referencing a template in HTML using the templateName property works fine. Any ideas?
Here's a jsfiddle with the surrounding code and HTML:
http://jsfiddle.net/TTMMz/3/
Could possibly be a bug, if you try to set the defaultTemplate instead of template it will work. You should maybe file an issue.
App.IndexView = Ember.View.extend({
defaultTemplate: Ember.Handlebars.compile('Index template in code')
});
FYI
For views classes that may have a template later defined (e.g. as
the block portion of a {{view}} Handlebars helper call in another
template or in a subclass), you can provide a defaultTemplate
property set to compiled template function. If a template is not
later provided for the view instance the defaultTemplate value
will be used:
AView = Ember.View.extend({
defaultTemplate: Ember.Handlebars.compile('I was the default'),
template: null,
templateName: null });
Add templateName: 'index' to App.IndexView. It looks like the router needs/wants a template named index and the way you had it in your JSFiddle the router wasn't able to find one.
JSFiddle example
App.IndexView = Ember.View.extend({
template: Ember.Handlebars.compile('Index template in code'),
templateName: 'index'
});