Ember.js:在模板中呈现谷歌图表(仅当存在时才称为目标DOM元素）

最好将与ui和布局相关的逻辑放在views中。因此，对于这个任务，我建议使用view或component。正如您已经意识到的那样，didInsertElement事件是调用这种逻辑的合适位置，因为您需要确保视图已插入到DOM中，并且所有必需的元素（如div#chart）都可用。

我提供的解决方案有点粗糙，但给出了一个起点。

其想法是创建一个可重用视图GoogleChartView，该视图具有可包含在任何其他视图中的相关模板google-chart。我假设仪表板视图最终也会包括其他图表，这些图表将使用其模型在图表、表格等中显示数据。此图表相关视图是在视图助手{{view "googleChart"}}的帮助下包含的。另一个重要的点是google.load需要在头中调用。

http://jsbin.com/oCIcexOB/1/edit

JS

App = Ember.Application.create();

/******** VIEWS ********/
App.DashboardView = Ember.View.extend({
  name: "",
  init: function(){
    //google.load("visualization", "1", {packages:["corechart"]});
    //google.setOnLoadCallback(drawBarGraph);
    this.set('name', 'ted');
    return this._super();
  }
});
App.GoogleChartView = Ember.View.extend({
  templateName:"google-chart",
  drawChart:function(){
    drawChart();
  }.on("didInsertElement")
});
/******** ROUTES ********/
App.Router.map(function() {
  this.resource('items');
  this.resource('dashboard');
});
App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('items');
  }
});
App.ItemsRoute = Ember.Route.extend({
  model: function() {
    var a = Em.A();
    a.pushObject( App.Item.create({title: 'A', cost: '100', options: buildMockOptions('A')}));
    a.pushObject( App.Item.create({title: 'B', cost: '200', options: buildMockOptions('B')}));
    a.pushObject( App.Item.create({title: 'C', cost: '300', options: buildMockOptions('C')}));
    return a;
  }
});
buildMockOptions = function(someVar){
  var arr = [];
  for(var i = 0;i<3;i++){
    var opt = App.Option.create({someOption: 'Option for ' + someVar + ': ' + i});
    opt.cost = 5;
    arr.pushObject(opt);
  }
  return arr;
};
/******** MODELS ********/
App.Item = Ember.Object.extend({
  title: '',
  cost: '',
  quantity: '',
  options: null,
  totalOptionsCost: function(){
    var j = this.get('options').reduce(
      function(prevValue, currentValue, index, array){ 
        return prevValue + parseInt(currentValue.get('cost'), 10); }, 0);
    return j;
  }.property('options.@each.cost')
});
App.Option = Ember.Object.extend({
  someOption: '',
  cost: ''
});

/******** CONTROLLERS ********/
App.ItemsController = Ember.ArrayController.extend({
  len: function(){
    return this.get('length');
  }.property('length'),
  totalCost: function() {
    return this.reduce( function(prevCost, cost){
      return parseInt(cost.get('cost'),10) + prevCost;
    }, 0);
  }.property('@each.cost'),
  totalOptions: function(){
    var opts = this.mapBy('options');
    return [].concat.apply([], opts).length;
  }.property(),
  totalOptionCost: function(){
    var sum = this.reduce(function(prev, curr){ 
      return prev + curr.get('totalOptionsCost');},0);
    return sum;
  }.property('@each.totalOptionsCost')
});
App.DashboardController = Em.Controller.extend({
  needs: ['items'],
  itemsLength: Ember.computed.alias('controllers.items.len'),
  itemsTotalCost: Ember.computed.alias('controllers.items.totalCost'),
  optionsTotal: Ember.computed.alias('controllers.items.totalOptions'),
  optionsCost: Ember.computed.alias('controllers.items.totalOptionCost')
});
// GOOGLE CHART FUNCTION
function drawChart() {
  // Create and populate the data table.
  var options = {
      title:"Yearly Coffee Consumption",
      width:600, 
      height:400,
      animation: {duration: 1000, easing: 'out'},
      vAxis: {title: "Cups", minValue:0, maxValue:500},
      hAxis: {title: "Year"}
  };
  var data = new google.visualization.DataTable();    
  data.addColumn('string', 'N');
  data.addColumn('number', 'Value');
  data.addRow(['2003', 0]);
  data.addRow(['2004', 0]);
  data.addRow(['2005', 0]);
  // Create and draw the visualization.
  var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
  chart.draw(data, options);
  data.setValue(0, 1, 400);
  data.setValue(1, 1, 300);
  data.setValue(2, 1, 400);
  chart.draw(data, options);
    var button = document.getElementById('b1');
    button.onclick = function() {
      if (data.getNumberOfRows() > 5) {
        data.removeRow(Math.floor(Math.random() * data.getNumberOfRows()));
      }
      // Generating a random x, y pair and inserting it so rows are sorted.
      var x = Math.floor(Math.random() * 10000);
      var y = Math.floor(Math.random() * 1000);
      var row = 0;
      while (row < data.getNumberOfRows() && parseInt(data.getValue(row, 0),10) < x) {
        row++;
      }
      data.insertRows(row, [[x.toString(), y]]);
      chart.draw(data, options);
    };
}
function drawChart() {
  // Create and populate the data table.
  var options = {
      title:"Yearly Coffee Consumption",
      width:600, 
      height:400,
      animation: {duration: 1000, easing: 'out'},
      vAxis: {title: "Cups", minValue:0, maxValue:500},
      hAxis: {title: "Year"}
  };
  var data = new google.visualization.DataTable();    
  data.addColumn('string', 'N');
  data.addColumn('number', 'Value');
  data.addRow(['2003', 0]);
  data.addRow(['2004', 0]);
  data.addRow(['2005', 0]);
  // Create and draw the visualization.
  var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
  chart.draw(data, options);
  data.setValue(0, 1, 400);
  data.setValue(1, 1, 300);
  data.setValue(2, 1, 400);
  chart.draw(data, options);
    var button = document.getElementById('b1');
    button.onclick = function() {
      if (data.getNumberOfRows() > 5) {
        data.removeRow(Math.floor(Math.random() * data.getNumberOfRows()));
      }
      // Generating a random x, y pair and inserting it so rows are sorted.
      var x = Math.floor(Math.random() * 10000);
      var y = Math.floor(Math.random() * 1000);
      var row = 0;
      while (row < data.getNumberOfRows() && parseInt(data.getValue(row, 0),10) < x) {
        row++;
      }
      data.insertRows(row, [[x.toString(), y]]);
      chart.draw(data, options);
    };
}

HTML

<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="Ember.js example: Trying to display a google chart in a template." />
<meta charset=utf-8 />
<title>JS Bin</title>
  <script src="http://www.google.com/jsapi?ext.js"></script>
  <script src="http://code.jquery.com/jquery-2.0.2.js"></script>
  <script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
  <script src="http://builds.emberjs.com/ember-latest.js"></script>
  <script src="http://www.google.com/jsapi?ext.js"></script>
  <script>google.load("visualization", "1", {packages:["corechart"]});</script>
</head>
<body>
  <script type="text/x-handlebars" data-template-name="application">
  <p><strong>Ember.js example:</strong><br> Trying to display a google chart in a template.</p>
  <p>This jsbin represents a dashboard that analyzes a hierarchy of items and child 'options' and visualizes that info in a 'dashboard' section'. Currently, I am trying to integrate a google chart into the dashboard right above the 'Change Value' button.</p>
  <p>Google chart example: <a href='http://jsfiddle.net/doub1ejack/h7mSQ/96/'>http://jsfiddle.net/doub1ejack/h7mSQ/96/</a><br>
  Stackoverflow post: <a href='http://stackoverflow.com/questions/20198317/ember-js-rendering-google-chart-in-template-aka-target-dom-element-only-when-p'>http://stackoverflow.com/questions/20198317/...</a></p>
    {{render dashboard}}
    {{outlet}}
  </script>
  <script type="text/x-handlebars" data-template-name="items">
    <h2>Items:</h2>
    <dl>
      {{#each}}
        <dt>Item: {{title}}</dt>
        <dd>Cost: {{cost}}</dd>
        <dd class='options'>{{render 'options' options}}</dd>
      {{/each}}
    </dl>
  </script>
   <script type="text/x-handlebars" data-template-name="options">
    {{log controller}}
    <dl>
      {{#each option in controller }}
        <dt>{{option.someOption}}</dt>
        <dd>Option cost: {{option.cost}}</dd>
      {{/each}}
    </dl>
  </script>

  <script type="text/x-handlebars" data-template-name="dashboard">
    <h2>Dashboard:</h2>
    {{view "googleChart"}}
    <div id="chart"></div>
    {{! ITEM/OPTION ANALYSIS }}
    {{#if controllers.items}}
    <h3>Item Overview:</h3>
    Total number of items (expect 3): {{itemsLength}}<br>
    Total cost of items (expect 600): {{itemsTotalCost}}
    <h3>Option Overview:</h3>
    Total number of options (expect 30): {{optionsTotal}}<br>
    Total cost of options (expect 45): {{optionsCost}}
    {{/if}}
  </script>
  <script type="text/x-handlebars" data-template-name="google-chart">
    <div id="chart"></div>
<form><input id="b1" type="button" value="Change Value"/></form>
  </script>
</body>
</html>

编辑

这是另一个例子，其中具有与绘制图表相关的属性和数据的代码被容纳在GoogleChartView类中，允许绑定属性、执行操作等。这也是一个示例草案，只是为了演示这个想法。change-value操作执行旧代码，但它肯定可以修改GoogleChartView的数据属性。GoogleChartView的数据属性当然可以更好地利用该模型。有趣的一点是通过this.$().find检索视图的DOM，访问包含该视图的上下文的控制器（DashboardController），因为此时可以检索、解析和绘制任何数据。

http://jsbin.com/UHajoX/1/edit

App.GoogleChartView = Ember.View.extend({
  templateName:"google-chart",
  chart:null,
  options:{
      title:"Yearly Coffee Consumption",
      width:600, 
      height:400,
      animation: {duration: 1000, easing: 'out'},
      vAxis: {title: "Cups", minValue:0, maxValue:500},
      hAxis: {title: "Year"}
  },
  data:function(){
    var items = this.get("controller").get("items");
    var chartData = new google.visualization.DataTable();
    chartData.addColumn('string', 'N');
    chartData.addColumn('number', 'Value');
    chartData.addRow(['2003', 0]);
    chartData.addRow(['2004', 0]);
    chartData.addRow(['2005', 0]);
    items.forEach(function(item,index){
      chartData.setValue(index,1,parseInt(item.get("cost"),10));
    });
   /*chartData.setValue(0, 1, 400);
    chartData.setValue(1, 1, 300);
    chartData.setValue(2, 1, 400);*/

    return chartData;
  }.property(),
  drawChart:function(){
    this.drawChart2();
  }.on("didInsertElement"),
  drawChart2:function(){
  var data = this.get("data");
  // Create and draw the visualization.
  this.set("chart", new google.visualization.ColumnChart(this.$().find('#chart').get(0)));
  this.get("chart").draw(data, this.get("options"));

  },
    actions:{
      changeValue:function(){
        var data = this.get("data");
      if (data.getNumberOfRows() > 5) {
        data.removeRow(Math.floor(Math.random() * data.getNumberOfRows()));
      }
      // Generating a random x, y pair and inserting it so rows are sorted.
      var x = Math.floor(Math.random() * 10000);
      var y = Math.floor(Math.random() * 1000);
      var row = 0;
      while (row < data.getNumberOfRows() && parseInt(data.getValue(row, 0),10) < x) {
        row++;
      }
      data.insertRows(row, [[x.toString(), y]]);
      this.set("data",data);
      this.get("chart").draw(data, this.get("options"));   
      }
    }
});

警告：我想未来数据可能来自ember应用程序本身，但现在调用谷歌加载时，视图可能会尝试调用drawChart，但数据还不可用。为了克服这个问题，您可能需要在调用drawChart之前检查数据是否已加载。