How to pass a model to a template retrieved from a route in Ember 1.6
I am trying to set a model in a rendered template from a route. The model is written correctly by calling the template:
{{#each itemController="user"}}
<div {{bind-attr class="isExpanded:expanded"}}>
<div><button {{action "sayHello" this}}>{{first_name}} {{last_name}}</button></div>
and my route:
Newkonf.UsersRoute = Ember.Route.extend({
isExpanded: false,
actions: {
sayHello: function(myModel){
alert('first name: ' + myModel.first_name); // <- this works
// this.render('edit-user', {model: myModel}); <- doesn't work but not sure since this leads me to susupec
// it might https://github.com/emberjs/ember.js/issues/1820
// this.set('model', myModel}); <- doesn't work
this.render('edit-user');
}
}
}
rudders:
going to edit user here first name: {{first_name}}
change 1
Yes, I can update the post in UserRoute and it will update accordingly. However, since I indicated to the UserController that this would cause the UserRoute to take precedence, but I think not.
Here is my router:
Newkonf.Router.map(function() {
// this.resource('posts');
this.route('about', { path: '/about'});
this.resource('users', { path: '/users'});
});
thanks for any help
change 2
should have done my modal.js.hbs like this:
within modal for you:
{{model.first_name}}
because it didn't work:
within modal for you:
{{first_name}}
and not sure why.
here is my route
Newkonf.ApplicationRoute = Ember.Route.extend({
actions:{
somePlace: function(item){
alert('here i am in somePlace: ' + item.last_name); // <- this works
var modalController = this.controllerFor('modal');
modalController.set('model', item);
var myjt=modalController.get('model');
console.log('my value:' + myjt.first_name); // <- this works
this.render('modal', {
into: 'application',
outlet: 'modal3',
controller: modalController
});
}
}
});
and no controller
source to share
To play on a specific output, you need to name the outlet, and the outlet should be displayed when you try to do it.
In the case of modality, having it in the application template is usually a good choice, since the application is always in sight.
actions: {
openModal: function(item){
var modalController = this.controllerFor('modal');
modalController.set('model', item);
this.render('modal', { // template
into: 'application', // template the outlet lives in
outlet: 'modal', // the outlet name
controller: modalController // the controller to use
});
}
}
App.ModalController = Em.ObjectController.extend();
In the above example, I draw a template modal
, in application
, using an output named modal
( {{outlet 'modal'}}
), and I created a controller to return the template that I am executing. In this process, I set up a model on the controller to be used in the template.
You can read more about modals: http://emberjs.com/guides/cookbook/user_interface_and_interaction/using_modal_dialogs/
And here's an example: http://emberjs.jsbin.com/pudegupo/1/edit
source to share