Javascript ajax响应后在outlet中渲染视图

在我的主页中，我有一个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}}

这是监视列表路由器中的代码

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

我只想在应用程序模板中添加ajax调用后创建的视图

---

有人能指出我错在哪里吗。

您的视图正在加载到outlet中。一旦您进入此路径，在ajax调用填充之前，它没有数据。将日志记录放在renderTemplate函数中，您将看到这一点

我将在路由的setupController方法中进行ajax调用，用调用的结果填充控制器，以便您可以在视图中显示这些结果。有关详细信息，请参阅此方法的文档

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

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

您可以使用{{controller.data.property}或{{{{controller.data.htmlProperty}}在监视列表模板中监视控制器属性以呈现html

---

如果这还不够有用，请发布一个JSFIDLE来说明您当前正在做的事情。

您能把JSFIDLE放在一起吗？

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