EmberJS - 不推荐使用对象代理 - 访问模板中控制器的属性

Question

我试图了解某些特殊性。

在一个控制器中设置xxx 属性并迭代#each 有效，而与yyy #each 看似相同的操作却不...

我包括代码的亮点和可运行的代码sn-p：

---

App.IndexController = Ember.Controller.extend({
  xxx : [{name:"a"}, {name:"b"}], // this works just fine
});  

{{#each item in xxx}}
  <li>{{item.name}}</li>
{{/each}}

---

App.ColorController = Ember.Controller.extend({
  yyy : [{name:"c"}, {name:"d"}], // this triggers deprecation
  // You attempted to access `yyy` from ...
  // But object proxying is 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"}], // this works just fine
    });     

    App.ColorController = Ember.Controller.extend({
      init : function() {
        this._super();
        console.info("Just to double check, this controller gets initialised");
      },
      yyy : [{name:"c"}, {name:"d"}], // this triggers deprecation
      // You attempted to access `yyy` from ...
      // But object proxying is 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 back to the 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>

---

我想了解更多：

• 为什么它在一种情况下有效而在另一种情况下无效？
• Ember 的修复方法是什么？

编辑：更新的代码 sn-p 包括颜色模型。要触发弃用警告，请单击其中一种颜色（红色、蓝色）...这就是我运行 sn-p 时发生的情况：

Answer 1

好的，正如我所料 - 问题在于命名约定和过去的遗物（ObjectController）。声明 ColorController 为模型创建控制器，而不是路由。您需要在此处使用控制器进行路由，因此将 ColorController 更改为 ColorShowController 可以解决问题和值渲染。已弃用。

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"}], // this works just fine
    });     

    App.ColorShowController = Ember.Controller.extend({
      init : function() {
        this._super();
        console.info("Just to double check, this controller gets initialised");
      },
      yyy : [{name:"c"}, {name:"d"}], // this triggers deprecation
      // You attempted to access `yyy` from ...
      // But object proxying is 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 back to the 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>