How to add css class to the body tag on specific route? I tried to use body tag in a handlebars template but didn't work...
Update:
After some googling I came with this solution. Not sure that this is the best way to do this, but it works.
App.SomeRoute = Em.Route.extend
activate: ->
Em.$('body').addClass 'some-class'
deactivate: ->
Em.$('body').removeClass 'some-class'
Related
i'm having some trouble designing an EmberJS layout. I have a view divided in two parts :
a content library on the left
a playlist editor on the right
Currently, those two elements share the same controller.
I can't figure how to use two different controllers for those two sides to be able to re-use the content library in other views or even having a view with two playlist editors.
My root view looks like this so far :
<script type="text/x-handlebars" data-template-name="playlists">
<div id="library">{{template library}}</div>
<div id="playlistEditor">{{template playlisteditor}}</div>
</script>
I saw docs about the {{control}} helper, but it is unstable and i'm not sure this is what i'm looking for.
Thanks !
Okay, i found the answer, i had to use the {{render}} helper, like that :
<script type="text/x-handlebars" data-template-name="playlists">
<div id="library">{{render "library" library}}</div>
<div id="playlistEditor">{{render "playlisteditor" playlist}}</div>
</script>
Then, in my route :
App.PlaylistsRoute = Ember.Route.extend({
setupController: function(controller) {
controller.set('playlist', playlist);
controller.set('library', library);
}
});
Then, this EmberJS will automatically wire the App.PlaylisteditorController, the App.LibraryController and the views playlisteditor and library. Awesome.
I have
Esploreo.TE.Views.ItemView = Ember.View.extend({
elementId : "item",
templateName : 'itemTemplate'
});
and a template like
<script type="text/x-handlebars" data-template-name="itemTemplate">
content of templat
</script>
and all works good. But i don't to want to use this type of coding. In previous Ember versions it was possible to write the template code in the definition of view, like this:
Esploreo.TE.Views.ItemView = Ember.View.extend({
elementId : "item",
template: Em.Handlebars.compile('content of template'),
});
but it doesn't work (emberjs 1.0.0-RC.1). This features is removed from this release?
That's a curious way of working with Ember! To answer your question though, you need to add .append() to the end of your .create() like so:
App.ItemView.create().append();
Obligatory jsFiddle: http://jsfiddle.net/MGXDe/
Whilst I don't know your use case for this, I can't stress enough that this seems a little too curious, bordering on bad usage of Ember.
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 playing around with Ember.js (within Rails app) and got the the point when displaying a form. I used "partial" handlebars tag, like this:
{{partial "entity_edit_fields"}}
Ember tries to retrieve the template from _entity_edit_fields.hbs file. However, I have put all templates related to entity into separate directory. Now, I'd like to tell Ember to look to entity/_edit_fields.hbs. How can I achieve this?
To include the template entity/_edit_fields.hbs as a partial use:
{{partial "entity/edit_fields"}}
If you get stuck on something like this again, try having a look at the ember test suite. There will almost always be an example there that can help answer your question. I wasn't sure how partial worked either, so before answering I had a look at handlebars_test.js
test("should render other slash-separated templates using the {{partial}} helper", function() {
Ember.TEMPLATES["child/_subTemplate"] = Ember.Handlebars.compile("sub-template");
view = Ember.View.create({
template: Ember.Handlebars.compile('This {{partial "child/subTemplate"}} is pretty great.')
});
Ember.run(function() {
view.appendTo('#qunit-fixture');
});
equal(Ember.$.trim(view.$().text()), "This sub-template is pretty great.");
});
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.