阅读(1.9k) 书签赞(0) 我要纠错

EmberJS 渲染模板

2018-01-03 15:35 更新

渲染模板

该路由用于将外部模板渲染到屏幕。这可以通过在路由处理程序中定义renderTemplate钩子来实现。您还可以通过在控制器选项中指定控制器名称，使用路由处理程序控制器之外的其他控制器。

Ember.Route.extend({
  renderTemplate: function() {
    this.render('templateName');
  }
});

在上面的代码中，路由处理程序通过使用renderTemplatehook来渲染名为templateName的模板。

例子

<!DOCTYPE html>
   <html>
      <head>
         <title>Emberjs Rendering a Template</title>
            <!-- CDN's-->
            <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
            <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
            <script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.prod.js"></script>
            <script src="https://builds.emberjs.com/release/ember.debug.js"></script>
      </head>
      <body>
         <h1>Rendering The Template</h1>
         <div id="divApp1"></div>
         <script type="text/x-handlebars" data-template-name="index">
             <p>Rendering Latest News Template :</p>
             {{#link-to "details"}}Get The Latest News{{/link-to}}
             <hr/>
             <h2>HOME</h2>
         </script>

         <script type="text/x-handlebars" data-template-name="details">
            {{outlet "NewsTempl"}}
         </script>

         <script type="text/x-handlebars" data-template-name="NewsTempl">
            <hr/>
            <h2>Reporting The News...!</h2>
         </script>

         <script type="text/javascript">
             //rootElement is parent element to all the other elements.
             App = Ember.Application.create({ rootElement: "#divApp1" });

             App.Router.map(function () {
                 this.route('index', { path: '/' });
                 //specifying the path for template
                 this.route('details', { path: '/details' });
             });

             App.DetailsRoute = Ember.Route.extend({
               renderTemplate: function () {
                 //render the temlate which has outlets
                 this._super();
                 //rendet the News in NewsTempl outlet
                 this.render('NewsTempl', { outlet: 'NewsTempl' });
               }
             });
       </script>
   </body>
</html>

输出

让我们执行以下步骤，看看上面的代码如何工作：

将上面的代码保存在routing_rndr_templ.html文件中
在浏览器中打开此HTML文件。

以上内容是否对您有帮助：

写笔记

我要补充