Render a view in the outlet after ajax response

Question

In my home page i have an oulet watchListView i just want to replace the outlet with the view i am getting after clicking the link "/watch_lists".

This is the code for application Layout/template

 <div id='main-outlet'>
  {{outlet}}
  <div class="watch-list-rght"><a href="/watch_lists"><i class="icon-eye-open"></i></a>  </div>
 </div>
 {{outlet watchListView}}

This is the code in application route

 this.resource('watchList', { path: '/watch_lists' });

This is the code in WatchList router

 Discourse.WatchListRoute = Discourse.Route.extend({
   redirect: function() { Discourse.redirectIfLoginRequired(this); },
   renderTemplate: function() {
     this.render('watch_lists', { into: 'application', outlet: 'watchListView' });
   } 
 });

I Just want to add view created after the ajax call in the application template

Can anyone point me out where i am wrong.

Could you put together a jsFiddle? – chopper Oct 07 '13 at 18:00 — chopper, Oct 07 '13 at 18:00

score 0 · Answer 1 · answered Oct 11 '13 at 01:54

Your view is loading into the outlet as soon as you move into this route, it just has no data until populated by the ajax call. Put logging in the renderTemplate function and you'll see this.

I would make the ajax call in your route's setupController method, populating the controller with the results of that call so you can display those results in your view. See the documentation on this method for more info.

In the AJAX callback, you should be populating the controller with the results of that call and have handlebars in the template pointing to the data you want to display. It will load automatically when the Ajax call comes back and populates the controller:

setupController:function(controller){
    someObj.AjaxCall(function(data){
        controller.set('data',data);
    }
}

You can watch controller properties in your watchList template with {{controller.data.property}} or {{{controller.data.htmlProperty}}} to render html.

If this is not helpful enough, post a jsfiddle that illustrates what you're currently doing.

Render a view in the outlet after ajax response

1 Answers1