在 ajax 响应后在出口中呈现视图

Render a view in the outlet after ajax response

本文关键字：视图 出口 ajax 响应      更新时间：2023-09-26

在我的主页上，我有一个 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' });

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

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

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

谁能指出我错在哪里。

一旦

您进入此路由，您的视图就会加载到出口中，在 ajax 调用填充之前，它只是没有数据。将日志记录放入 renderTemplate 函数中，您将看到这一点。

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

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

setupController:function(controller){
    someObj.AjaxCall(function(data){
        controller.set('data',data);
    }
}
您可以使用 {{

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

如果这还不够有用，请发布一个 jsfiddle 来说明您当前正在做什么。

相关文章：