0

この問題に関する多くの質問を読みましたが、ここにある問題はないようです。

私はサードパーティのコンポーネント (ember-highcharts) を使用していますが、これは問題なく動作します。

ダッシュボードと呼ばれるルートがあります。今のところ、このルートはダミーデータを使用しているだけで、ストアは使用していません。これは問題を説明するのに役立ちます。

テンプレート/ダッシュボード.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'}
            ]
    }],

});

templates/components/summary-chart.hbs

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

components/summary-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
        }
    }
  }

});

モデルが未定義で、概要チャート コンポーネントに渡されないのはなぜですか? チャートはレンダリングされますが (タイトルが表示されます)、モデルが定義されていないため、もちろんデータはプロットされません。

コンポーネントをこれに変更すると、データはコンポーネントに対して「ローカル」になり、グラフはデータ ポイントでレンダリングされます。

templates/components/summary-chart.hbs

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

components/summary-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'}
        ]
  }]

});

「summaryData」は「modelTestData」と同じデータ構造であるため、チャートはそれをプロットする方法を理解することに注意してください。

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

4

1 に答える 1

1

SO に投稿してから 2 分後に、自分の質問に対する答えに気付くのはなぜですか?

重要な行は「{summary-chart chartData...」です。

モデルは子コンポーネント (summary-chart) の「chartData」プロパティに「引き継がれる」ため、もちろんデータ構造はこのレベルで「chartData」プロパティにバインドされ、もはやモデル プロパティにはバインドされません。ダッシュボード/ルート レベル。

したがって、解決策は、ここでテンプレート バインディングを修正することです。

templates/components/summary-chart.hbs

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

chartData が「high-charts」子コンポーネントの「content」プロパティに渡され、チャートがレンダリングされます。

于 2016-08-30T02:28:30.793 に答える