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.
Related
I've been using some Ember objects in my code, such as "App.SelectedBlock" to access selected items in lists (a practice that started when I was using Sproutcore years ago) and now it looks like binding to these objects from the Handlebars templates is going to be deprecated and I'm not sure how to go about fixing that. I'm running Ember 1.8.1 and right now it will still work but I'll get "DEPRECATION: Global lookup of App.SelectedBlock from a Handlebars template is deprecated." and I'm pretty sure it's full removed in 1.9.0. I'm not sure how to go about fixing this without having to completely restructure my code. Any suggestions?
I guess you're doing smthing like:
{{App.SelectedBlock.id}}
You should not call global variables inside Handlebars template. This is a bad practice. But you can do smthing like this:
// in your template controller
selectedBlock: function(){
return Ember.get('App.SelectedBlock');
}.property('App.SelectedBlock')
In hbs template:
{{selectedBlock.id}}
You can create a property on the controller and use that instead of looking up App.SelectedBlock globally
App = Ember.Application.create();
App.ApplicationController = Ember.ObjectController.extend({
programmers: function(){
return App.SelectedBlock.get('programmers');
}.property()
});
App.SelectedBlock = Ember.Object.create({
programmers: [
{firstName: "Yehuda", id: 1},
{firstName: "Tom", id: 2}
]
});
Then, in your template you can do:
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{view "select"
content=programmers
optionValuePath="content.id"
optionLabelPath="content.firstName"}}
</script>
See a working example here
I am using Ember i18n in my app. I also want to use the translation strings in the controllers (in most cases in an alert or confirm message). How can this be done ?
See http://jsfiddle.net/cyclomarc/36VS3/2/
Clicking on the button should alert "info" and not "T1005" ...
<script type="text/x-handlebars">
{{t T1005}}<br>
<button {{action 'clickMe' content}}>{{t T1005}} - Click me</button>
</script>
CLDR.defaultLanguage = 'en';
App.ApplicationController = Ember.Controller.extend({
clickMe: function(){
alert('T1005');
}
})
I know that a possible workaround is to no longer use alert and confirm and replace them by for example the bootstrap alternatives. However, I could imagine that in certain cases you will want to do something with the strings in Javascript (e.g. update a certain label via jQuery or so).
Any ideas on how to use the i18n strings in the controllers is helpful. Using an i18n library is only usefull if all aspects of the application can be translated ...
Just found the solution. Just access the string via Ember.I18n.t("T1005");
JSFiddle updated: http://jsfiddle.net/cyclomarc/36VS3/7/
Might be late here, but what about using the Em.I18n.TranslateableProperties mixin as documented here ?
You could do something like :
App.ApplicationController = Ember.Controller.extend(Em.I18n.translateableProperties, {
messageTranslation: 'T1005',
clickMe: function(){
alert(this.get('message'));
}
});
In the template, {{message}} will also hold the translation.
The solution that works to me is the following (using Ember I18n):
App.ApplicationController = Ember.Controller.extend(Em.I18n.translateableProperties, {
messageTranslation: 'T001',
showMessage: function(){
alert(this.get('message'));
}
});
The answer from cyclomarc didn't work for me (it's from 2013, which might be related), but it pointed me in the right direction:
this.container.lookup('service:i18n').t('my.translation.id')
I am experimenting around with integrating Ember.Data into my application and also wanted to find out how to propery use ArrayController. Unfortunately I didn't even get around simple databinding on the controller.
I simply can't figure out where I went wrong, so I fully expect someone to be able to point out: Hey you wrote .extend instead of .create
I am trying something rather similar to what Discouse is doing in their AdminSiteSettings:
The controller in question:
App.UsersController = Ember.ArrayController.extend({
foo: 'bar'
});
route:
App.UsersRoute = Ember.Route.extend({
model: function () {
var users = App.User.find();
return users;
},
setupController: function (controller, model) {
controller.set('model', model);
console.log(controller.get('foo')); // this works correctly => bar
}
});
Only problem: The template is being rendered, but I can't bind to the foo property:
<script type="text/x-handlebars" data-template=name="users">
We render the correct template
{{foo}}
</script>
Only problem is: The Template never renders 'bar'. It's just empty.
Now I found something similar in Discourse where they have a textbox bound to filter:
https://github.com/discourse/discourse/blob/master/app/assets/javascripts/admin/controllers/admin_site_settings_controller.js
I can't really understand why my controller property is not showing up, (and yes I am actually trying to get Ember.data to work, but since this can easily be reproduced without it I figured I'd settle for the simple foo: bar property :(
Versions in use:
Ember.js: v1.0.0-rc.4-23-gbfd3023
Handlebars: 1.0.0-rc.4
Ember.data: 13
Any pointers are welcome. Thanks!
I don't know exactly where you app fails, but I have tried to recreate your use case and in this example jsbin it's working correctly, have a look.
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 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.");
});