閱讀(1.9k) 書簽贊(0) 我要糾錯

EmberJS 渲染模板

2018-01-03 15:35 更新

渲染模板

該路由用于將外部模板渲染到屏幕。這可以通過在路由處理程序中定義renderTemplate鉤子來實現(xiàn)。您還可以通過在控制器選項中指定控制器名稱，使用路由處理程序控制器之外的其他控制器。

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>

輸出

讓我們執(zhí)行以下步驟，看看上面的代碼如何工作：

將上面的代碼保存在routing_rndr_templ.html文件中
在瀏覽器中打開此HTML文件。

以上內(nèi)容是否對您有幫助：

寫筆記

我要補充