javascript - 具有 Knockout JS 自定义绑定(bind)的 Google Charts 仅绘制第一个图表而不绘制其余图表

Question

我一直在寻找这个问题的解决方案，但找不到任何地方。因此，我在这里请求你们。

我正在尝试将 GoogleBarChart 与 KnockoutJS 模型 View 绑定(bind)。所有绑定(bind)事件都被调用得很好，但不知何故它只绘制了第一个图表。

绑定(bind)如下:

// View Model 1
function ViewModel1() {    
    var self = this;
    self.ViewModel1_BarData =  ko.computed(function () {
         
        return new google.visualization.arrayToDataTable([
          ['EmailAddress', 'Received'],
          ['email1@mail.com', 12],
          ['email2@mail.com', 20],
          ['email3@mail.com', 15]
		  ]);
    });
  
  
  // View Model 2
function ViewModel2() {    
    var self = this;
    self.ViewModel2_BarData =  ko.computed(function () {
         
        return new google.visualization.arrayToDataTable([
          ['Server', 'Occupied Space'],
          ['server1', 10],
          ['server2', 20],
          ['server3', 40]
		  ]);
    });
  
  
  
// Knockout Custom Binding for googleBarChart
  
ko.bindingHandlers.googleBarChart = {
    init: function (element, valueAccessor, allBindingsAccesor, viewModel, bindingContext) {
        var chart = new google.charts.Bar(element);
        ko.utils.domData.set(element, 'googleBarChart', chart);
    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var value = ko.unwrap(valueAccessor());
        var options = allBindings.get('chartOptions') || {};        
        options = ko.unwrap(options);
      
        var chart = ko.utils.domData.get(element,'googleBarChart');
        chart.draw(value, options);
    }
};

<!-- First Chart -->
<div id="ViewModel1Bindng_div">
  
  <div id="ViewModel1_bar_div" data-bind="googleBarChart: ViewModel1_BarData, chartOptions: {
    width: 400, legend: { position: 'none' }, chart: { title: 'title-text', subtitle: 'subtitle-text' }}"></div>
  
</div>

<!-- Second Chart -->

<div id="ViewModel2Binding_div">
 
  <div id="ViewModel2_bar_div" data-bind="googleBarChart: ViewModel2_BarData, chartOptions: {
    width: 400,legend: { position: 'none' }, chart: { title: 'title-text', subtitle: 'subtitle-text' }}">
   </div>
</div>

如有任何帮助，我们将不胜感激。 提前致谢。 问候， 罗海尔

Answer 1

您在此处拼错了元素 ID:

ko.applyBindings(ViewModel2_model , document.getElementById("ViewModel2Bindng_div"))

应该是:

ko.applyBindings(ViewModel2_model , document.getElementById("ViewModel2Binding_div"))

我已经更新了您的代码段以供使用。

// View Model 1
function ViewModel1() {
  var self = this;
  self.ViewModel1_BarData = ko.computed(function() {

    return new google.visualization.arrayToDataTable([
      ['EmailAddress', 'Received'],
      ['email1@mail.com', 12],
      ['email2@mail.com', 20],
      ['email3@mail.com', 15]
    ]);
  });
}

// View Model 2
function ViewModel2() {
  var self = this;
  self.ViewModel2_BarData = ko.computed(function() {

    return new google.visualization.arrayToDataTable([
      ['Server', 'Occupied Space'],
      ['server1', 10],
      ['server2', 20],
      ['server3', 40]
    ]);
  });
}


// Knockout Custom Binding for googleBarChart

ko.bindingHandlers.googleBarChart = {
  init: function(element, valueAccessor, allBindingsAccesor, viewModel, bindingContext) {
    var chart = new google.visualization.BarChart(element);
    ko.utils.domData.set(element, 'googleBarChart', chart);
  },
  update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    var value = ko.unwrap(valueAccessor());
    var options = allBindings.get('chartOptions') || {};
    options = ko.unwrap(options);

    var chart = ko.utils.domData.get(element, 'googleBarChart');
    chart.draw(value, options);
  }
};


var ViewModel1_model = new ViewModel1();
ko.applyBindings(ViewModel1_model, document.getElementById("ViewModel1Bindng_div"));


var ViewModel2_model = new ViewModel2();
ko.applyBindings(ViewModel2_model, document.getElementById("ViewModel2Binding_div"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart'],'language':'en'}]}">
</script>

<!-- First Chart -->
<div id="ViewModel1Bindng_div">

  <div id="ViewModel1_bar_div" data-bind="googleBarChart: ViewModel1_BarData, chartOptions: {
    width: 400, legend: { position: 'none' }, chart: { title: 'title-text', subtitle: 'subtitle-text' }}"></div>

</div>

<!-- Second Chart -->

<div id="ViewModel2Binding_div">

  <div id="ViewModel2_bar_div" data-bind="googleBarChart: ViewModel2_BarData, chartOptions: {
    width: 400,legend: { position: 'none' }, chart: { title: 'title-text', subtitle: 'subtitle-text' }}">
  </div>
</div>