javascript - How to connect an Ember.js Controller to a View -

i have following structure in ember app:

app.router.map(function() {     this.route('shop', { path: '/shop' }); });  app.shoproute = ember.route.extend({     model: function() {         return $.getjson( "/fruits"); // returns json this: { apples: [...], oranges: [...]}     } });  app.applelistitemview = ember.view.extend({     templatename: 'apple-list-item',     tagname: 'li',     classnames: ['apple'] });  app.applelistitemcontroller = ember.arraycontroller.extend({     color: "green", }); 

next, when try use {{color}} in apple-list-item template, prints nothing. how should fix this?

you need worry naming. shop route in router, expects shoproute , shopcontroller, can leave out ember generate 1 you. , shop template. should consider view optional extension of template. ember has index route need index template:

<script type="text/x-handlebars" data-template-name="index">   {{#link-to 'shop'}}shop!{{/link-to}} </script> 

and shop template itemcontroller in each adding controller each element in apples list:

<script type="text/x-handlebars" data-template-name="shop">   shop! {{color}}   <ul>     {{#each apple in model.apples itemcontroller='apple'}}       <li class="apple">{{apple.model}} {{apple.color}}</li>     {{/each}}   </ul> </script> 

and application somehting like:

app = ember.application.create();  app.router.map(function() {     this.route('shop', { path: '/shop' }); }); 

with shoproute:

app.shoproute = ember.route.extend({     model: function() {         return { apples: [ 'grannysmith', 'pinklady' ], oranges: [ 'clementines' ]};     } }); 

and applecontroller used itemcontroller:

app.applecontroller = ember.controller.extend({     color: function() {       if (this.get('model') === 'grannysmith') {         return 'green';       }       return 'purple';                                             }.property('model'), }); 

see jsbin.