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

EmberJS 設置控制器

2018-01-03 13:52 更新

設置控制器

在Ember.js中，有必要設置幫助模板顯示檢索到的信息的控制器。Ember.js支持兩個內(nèi)置控制器Ember.ObjectController和Ember.ArrayController。這些是模板的模型屬性，以及任何其他顯示特定屬性。

設置model屬性以知道要呈現(xiàn)哪個模型，這可以通過使用路由處理程序的setupController鉤子來完成。setupController鉤子獲取第一個參數(shù)作為路由處理器的關聯(lián)控制器。您還可以設置路由的controllerName屬性而不是默認值。

Ember.Route.extend({
   setupController: function(controller, model) {
    controller.set('model', model);
  }
});

在上面的代碼中，在路由處理程序的setupController鉤子中設置model屬性。

例子

<!DOCTYPE html>
   <html>
      <head>
         <title>Emberjs Setting up a Controller</title>
            <!-- CDN's-->
            <script src="/attachements/w3c/handlebars.min.js"></script>
            <script src="/attachements/w3c/jquery-2.1.3.min.js"></script>
            <script src="/attachements/w3c/ember-template-compiler.js"></script>
            <script src="/attachements/w3c/ember.min.js"></script>
            <script src="/attachements/w3c/ember.prod.js"></script>
            <script src="/attachements/w3c/ember.debug.js"></script>
      </head>
      <body>
     <script type="text/x-handlebars" data-template-name="application">
	    {{outlet}}
	</script>

       <script type="text/x-handlebars" data-template-name="index">
          <!-- using the default controller as index -->
          <b>Employee Details</b>
          {{#each}}
             <p>{{index}}. {{empDetails}}</p>
          {{/each}}
       </script>

      <script type="text/javascript">
        App = Ember.Application.create({});

        App.IndexRoute = Ember.Route.extend({
        //Setting up the model property
           model: function(){
           //declaring the array values
             return [
                {firstName: 'Mack', lastName: 'KK'},
                {firstName: 'Micky', lastName: 'SK'},
                {firstName: 'Smith', lastName: 'KD'}
             ];
           }
       });

       App.IndexController = Ember.ArrayController.extend({
       //define name of the array controller
          itemController:'name'
       });

       App.NameController = Ember.ObjectController.extend({
       //Defining the computed property empDetails, that holds firstName and lastName as values
         empDetails: function(){
         //returning the computed property values
           return this.get('firstName')+ ' . ' + this.get('lastName');
         }.property('firstName', 'lastName'),

       //Defining the computed property index, that holds an array index values
        index: function(){
        //defining the array index as target to get an index values of an array
           return this.get('target').indexOf(this);
        }.property('target.[]')
      });
   </script>
 </body>
 </html>

輸出

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

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

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

寫筆記

我要補充