javascript - EmberJS - object proxying is deprecated - accessing property of a controller in template -

i'm trying understand peculiarity.

setting xxx property , iterating #each in 1 controller works, while seemingly same operation yyy #each doesn't...

i'm including highlights of code , runnable code snippet:

---

app.indexcontroller = ember.controller.extend({   xxx : [{name:"a"}, {name:"b"}], // works fine });    {{#each item in xxx}}   <li>{{item.name}}</li> {{/each}} 

---

app.colorcontroller = ember.controller.extend({   yyy : [{name:"c"}, {name:"d"}], // triggers deprecation   // attempted access `yyy` ...   // object proxying deprecated. please use `model.yyy` instead });  {{#each item in yyy}}   <li>{{item.name}}</li> {{/each}} 

app = ember.application.create();        app.color = ds.model.extend({        name: ds.attr('string')      });            app.router.map(function() {        this.resource('color', function(){          this.route('show', { path: ':color_id' });        });      });        app.indexroute = ember.route.extend({                model: function() {          return [                  { id: 1, name: "red" },                  { id: 2, name: "blue" },                 ];        }      });           app.indexcontroller = ember.controller.extend({        xxx : [{name:"a"}, {name:"b"}], // works fine      });             app.colorcontroller = ember.controller.extend({        init : function() {          this._super();          console.info("just double check, controller gets initialised");        },        yyy : [{name:"c"}, {name:"d"}], // triggers deprecation        // attempted access `yyy` ...        // object proxying deprecated. please use `model.yyy` instead      });

<script type="text/x-handlebars">      <h2>ember starter kit</h2>      {{outlet}}    </script>       <script type="text/x-handlebars" id="index">      <h3>index</h3>      <ul>        {{#each color in model}}          <li>{{#link-to "color.show" color}} {{color.name}} {{/link-to}}</li>        {{/each}}      </ul>      <ul>        {{#each item in xxx}}          <li>{{item.name}}</li>        {{/each}}      </ul>     </script>      <script type="text/x-handlebars" id="color/show">      <h3>color/show</h3>      <h4>{{ model.name }}</h4>      <ul>        {{#each item in yyy}}          <li>{{item.name}}</li>        {{/each}}      </ul>      {{#link-to "application"}}go list{{/link-to}}    </script>       <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>    <script src="http://builds.emberjs.com/tags/v1.13.2/ember.debug.js"></script>    <script src="http://builds.emberjs.com/tags/v1.13.2/ember-template-compiler.js"></script>    <script src="http://builds.emberjs.com/tags/v1.13.2/ember-data.js"></script>

---

i'd learn more:

• why works in 1 case , doesn't work in another?
• what ember way of fixing it?

edit: updated code snippet include color model. trigger deprecation warning click on 1 of colours (red, blue)... happens when run snippet:

okay, expected - problem lies in naming conventions , relics of past(objectcontroller). declaring colorcontroller creates controller model, not route. need here controller route, changing colorcontroller colorshowcontroller solves problem , values render. deprecation's gone.

app = ember.application.create();        app.color = ds.model.extend({        name: ds.attr('string')      });            app.router.map(function() {        this.resource('color', function(){          this.route('show', { path: ':color_id' });        });      });        app.indexroute = ember.route.extend({                model: function() {          return [                  { id: 1, name: "red" },                  { id: 2, name: "blue" },                 ];        }      });           app.indexcontroller = ember.controller.extend({        xxx : [{name:"a"}, {name:"b"}], // works fine      });             app.colorshowcontroller = ember.controller.extend({        init : function() {          this._super();          console.info("just double check, controller gets initialised");        },        yyy : [{name:"c"}, {name:"d"}], // triggers deprecation        // attempted access `yyy` ...        // object proxying deprecated. please use `model.yyy` instead      });

<script type="text/x-handlebars">      <h2>ember starter kit</h2>      {{outlet}}    </script>       <script type="text/x-handlebars" id="index">      <h3>index</h3>      <ul>        {{#each color in model}}          <li>{{#link-to "color.show" color}} {{color.name}} {{/link-to}}</li>        {{/each}}      </ul>      <ul>        {{#each item in xxx}}          <li>{{item.name}}</li>        {{/each}}      </ul>     </script>      <script type="text/x-handlebars" id="color/show">      <h3>color/show</h3>      <h4>{{ model.name }}</h4>      <ul>        {{#each item in yyy}}          <li>{{item.name}}</li>        {{/each}}      </ul>      {{#link-to "application"}}go list{{/link-to}}    </script>       <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>    <script src="http://builds.emberjs.com/tags/v1.13.2/ember.debug.js"></script>    <script src="http://builds.emberjs.com/tags/v1.13.2/ember-template-compiler.js"></script>    <script src="http://builds.emberjs.com/tags/v1.13.2/ember-data.js"></script>