CODEWITHSUNDEEP
ember.js
timpone
timpone

Reputation: 19969

How to pass a model to a template rendered from a route in Ember 1.6

I'm trying to set a model in a rendered template from a route. The model is being captured correctly via the template call:

{{#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');
    }
  }
}

the handlebars is:

going to edit user here first name: {{first_name}}

Edit 1

I can update the message in UsersRoute and it will update accordingly. I kind of though since I specified UserController that it would cause UserRoute to take precedence but I guess not.

Here is my router:

Newkonf.Router.map(function() {
  // this.resource('posts');
  
  this.route('about', { path: '/about'});
  this.resource('users', { path: '/users'}); 
});

Edit 2

I had to do my modal.js.hbs like this:

within modal for you:
{{model.first_name}}

because this didn't work:

within modal for you:
{{first_name}}

and not sure why.

Here's 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 there is no controller.

Upvotes: 0

Views: 2850

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

Rendering to a particular outlet requires both the outlet be named, and the outlet to be in view when you attempt to render to it.

In the case of a modal, having it live in the application template is generally a good choice since the application is always in view.

  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's name
        controller: modalController  // the controller to use
      });
    }
  }


  App.ModalController = Em.ObjectController.extend();

In the case above I'm rendering the template modal, into application, using the outlet named modal ( {{outlet 'modal'}}) and I created a controller to back the template I'm rendering. In the process I set the model on the controller, which would 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 the example: http://emberjs.jsbin.com/pudegupo/1/edit

Upvotes: 2

Related Questions