javascript - Ember.js use itemController if not following naming Conventions -

according official documentation, way create itemcontroller is:

app.postscontroller = ember.arraycontroller.extend({ itemcontroller: 'post' });  app.postcontroller = ember.objectcontroller.extend({   // `title` property proxied underlying post.   titlelength: function() {     return this.get('title').length;   }.property('title') }); 

but i'm not setting arraycontroller app. set local variable behind function scope. , itemcontroller property can string (according documentation). how set itemcontroller property?

my code looks this:

var channels=ember.object.extend({         list:ember.arraycontroller.create(             {                 "model":[                     {                         "id":"display",                         "label":"display",                     },{                         "id":"social",                         "label":"social",                     },{                         "id":"email",                         "label":"email",                     }                 ]             }         )     });     app.channelcontroller=ember.controller.extend({         channels:channels,     }));      <script type="text/x-handlebars" data-template-name='channel'>         <div>             {{#each channel in channels.list}}                 {{channel.label}}             {{/each}}         </div>     </script>    

i don't want pollute app namespace itemcontrollers used locally.

update

suppose channels this:

var channels=ember.object.extend({         list:ember.arraycontroller.create(             {                 "model":[                     {                         "id":"display",                         "label":"display",                     },{                         "id":"social",                         "label":"social",                     },{                         "id":"email",                         "label":"email",                     }                 ]             }         ),         selected:"display"     }); 

and want in template:

    <script type="text/x-handlebars" data-template-name='channel'>         <h1>{{channels.selected}}</h1>         <div>             {{#each channel in channels.list}}                 <div {{bind-attr class="channel.isselected:active:inactive"}}>{{channel.label}}</div>             {{/each}}         </div>     </script>    

so outputs:

    <h1>display</h1>     <div>         <div class="active">display</div>         <div class="inactive">social</div>         <div class="inactive">email</div>      </div> 

how do components?

you'll want read guide of components full picture, gist of want replace item controllers components. however, components replace template inside of each block well. don't entirely understand what's going on in code, here's example based on code.

// component app.channeldisplaycomponent = ember.component.extend({      channel: null,      isselected: function() {         // compute want         // maybe need pass in property     }.property('channel')  });  {{! component template }} <div {{bind-attr class="channel.isselected:active:inactive"}}>     {{channel.label}} </div>  {{!channels template}} {{#each channel in channels.list}}     {{channel-component channel=channel}} {{/each}} 

the component item controller, gets own template well.

---

you shouldn't worried polluting app namespace (unless you're having naming collisions, that's different issue). , kitler said, should move components instead of item controllers. if want this, best way can think of overridding (private) controllerat hook.

var itemcontroller = ember.controller.extend({});  app.postscontroller = ember.arraycontroller.extend({     controllerat: function(idx, object, controllerclass) {         var subcontrollers = this._subcontrollers;         if (subcontrollers.length > idx) {             if (subcontrollers[idx]) {                 return subcontrollers[idx];             }         }          var parentcontroller = (this._isvirtual ? this.get('parentcontroller') : this);          var controller = itemcontroller.create({             target: parentcontroller,             parentcontroller: parentcontroller,             model: object         });          subcontrollers[idx] = controller;          return controller;     } })