1

私は特定の特異性を理解しようとしています。

プロパティの設定xxxと1つのコントローラーでの反復処理#eachは機能しますが、一見同じ操作は機能しyyy #eachません...

コードのハイライトと実行可能なコード スニペットを含めます。


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の方法は何ですか?

編集: 更新されたコード スニペットには、カラー モデルが含まれます。非推奨の警告をトリガーするには、色 (赤、青) のいずれかをクリックします...これは、スニペットを実行するとどうなるかです。

ここに画像の説明を入力

4

1 に答える 1

2

わかりました、予想通り - 問題は命名規則と過去の遺物にあります( 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>

于 2015-06-20T11:24:03.393 に答える