EmberJS 设置控制器

2018-01-03 13:52 更新

设置控制器

在Ember.js中，有必要设置帮助模板显示检索到的信息的控制器。Ember.js支持两个内置控制器Ember.ObjectController和Ember.ArrayController。这些是模板的模型属性，以及任何其他显示特定属性。

设置model属性以知道要呈现哪个模型，这可以通过使用路由处理程序的setupController钩子来完成。setupController钩子获取第一个参数作为路由处理器的关联控制器。您还可以设置路由的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>

输出

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

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

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

写笔记

我要补充