EmberJS 2.7がコンポーネントにデータを渡すのに失敗しました

Question

この問題に関して多くの質問がありましたが、私はここに問題があるようです。

私は、この障害を除いて素晴らしい他社製コンポーネント（ember-highcharts）を使用しています。

私はダッシュボードと呼ばれるルートを持っています。今のところ、このルートはちょうどdummydataを使用しています、それは店を使用していません。これは問題を説明するのに役立ちます。

テンプレート/ dashboard.hbs

<div> 
{{log model}} <-- NOTE this logs the object to the console as expected 
{{summary-chart chartData=model}} <-- my component, see below 
</div> 

ルート/ dashboard.js

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    // this is for testing, normally we get the data from the store 
    model: function() { 
     return this.get('modelTestData'); 
    }, 

    setupController: function(controller, models) { 
     this._super(controller, models); 
     controller.set('model', models); 
    }, 

    modelTestData: [{ 
     name: 'gear', 
     colorByPoint: true, 
     data: [ 
      {y: 10, name: 'Test1'}, 
      {y: 12, name: 'Test2'}, 
      {y: 40, name: 'Test3'} 
      ] 
    }], 

}); 

テンプレート/構成要素/要約chart.hbs

{{log model}} <-- NOTE this logs '**undefined**' to the console NOT expected 
{{high-charts chartOptions=summaryOptions content=model}} 

コンポーネント/要約チャート。 js

import Ember from 'ember'; 

export default Ember.Component.extend({ 

    summaryOptions: { 
    chart: { 
     plotBackgroundColor: null, 
     plotBorderWidth: null, 
     plotShadow: false, 
     type: 'pie' 
    }, 
    title: { 
     text: 'Total weight of gear in each category' 
    }, 
    tooltip: { 
     pointFormat: '<b>{point.percentage:.1f}%</b> of {series.name}' 
    }, 
    plotOptions: { 
     pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      dataLabels: { 
       enabled: false 
      }, 
      showInLegend: true 
     } 
    } 
    } 

}); 

モデルが未定義で、サマリーチャートコンポーネントに渡されないのはなぜですか？モデルは定義されていないので、チャートはレンダリングされます（タイトルを見ることができます）が、データはプロットされません。

Iはこれに成分を変更するので、データは、コンポーネントの「ローカル」である場合、チャートのデータポイントでレンダリングされ：

テンプレート/構成要素/要約chart.hbs

{{high-charts chartOptions=summaryOptions content=summaryData}} 

「summaryData」「はmodelTestData」と同一のデータ構造であるので、グラフはそれをプロットする方法を理解することを

コンポーネント/要約chart.js

import Ember from 'ember'; 

export default Ember.Component.extend({ 

    summaryOptions: { 
    chart: { 
     plotBackgroundColor: null, 
     plotBorderWidth: null, 
     plotShadow: false, 
     type: 'pie' 
    }, 
    title: { 
     text: 'Total weight of gear in each category' 
    }, 
    tooltip: { 
     pointFormat: '<b>{point.percentage:.1f}%</b> of {series.name}' 
    }, 
    plotOptions: { 
     pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      dataLabels: { 
       enabled: false 
      }, 
      showInLegend: true 
     } 
    } 
    }, 

    summaryData: [{ 
    name: 'gear', 
    colorByPoint: true, 
    data: [ 
     {y: 10, name: 'Test1'}, 
     {y: 12, name: 'Test2'}, 
     {y: 40, name: 'Test3'} 
     ] 
    }] 

}); 

注意。

私が理解できないのは、ルート/コントローラの組み合わせがモデルを子コンポーネントに渡していない理由です。

Answer 1

なぜあなたはあなた自身の質問に対する答えを実現しているのですか？

キー行は「{要約チャートchartData ...」である

モデルは、子コンポーネント（要約グラフ）の「chartData」プロパティに「受け継が」されているので、当然のデータ構造はこのレベルの 'chartData'プロパティにバインドされ、ダッシュボード/ルートレベルのモデルプロパティにはなりません。

ので、解決策はここに結合テンプレートを修正することです：

テンプレート/コンポーネント/要約chart.hbs

{{log chartData}} <-- NOTE this logs the object now as expected 
{{high-charts chartOptions=summaryOptions content=chartData}} 

chartDataは今「高の「内容」プロパティに渡されますチャートの子コンポーネント、およびチャートレンダリング、よろしく！