ajax响应后在插座中渲染视图

时间:2013-10-07 13:16:21

标签: javascript ember.js outlet discourse

在我的主页上我有一个oulet watchListView我只想用点击链接“/ watch_lists”后我得到的视图替换插座。

这是应用程序布局/模板的代码

 <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.resource('watchList', { path: '/watch_lists' });

这是WatchList路由器中的代码

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

我只想在应用程序模板

中添加ajax调用后创建的视图

有人能指出我错在哪里。

1 个答案:

答案 0 :(得分:0)

一旦您进入此路线,您的视图就会加载到插座中,只有在ajax调用填充之前它才会有数据。将记录放在renderTemplate函数中,你会看到这个。

我会在你的路线的setupController方法中进行ajax调用,使用该调用的结果填充控制器,以便在视图中显示这些结果。有关详细信息,请参阅有关此方法的文档。

在AJAX回调中,您应该使用该调用的结果填充控制器,并在模板中指向要显示的数据的把手。当Ajax调用返回并填充控制器时,它将自动加载:

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

您可以使用{{controller.data.property}}或{{{controller.data.htmlProperty}}}在watchList模板中观看控制器属性以呈现html。

如果这样做不够有用,请发布一个说明你当前正在做什么的jsfiddle。