Question

我正在使用BackboneJS和RequireJS，我想在视图中添加一个Epoch图表。

我有什么：

我的视图模板只是：

<h1>Charts</h1>
<div id="gaugeChart" class="epoch gauge-small"></div>

我的路由器

showChart: function(){
  $('#page-wrapper').html(new ChartsView().el);
}

我的观点

/*global define*/
define([
  'jquery',
  'underscore',
  'backbone',
  'handlebars',
  'd3',
  'epoch',
  'text!templates/Charts.html'
], function($, _, Backbone, Handlebars, d3, epoch, templateSource) {
  var ChartsView = Backbone.View.extend({

    template: Handlebars.compile(templateSource),

    events: {
      'click #gaugeChart': 'hasRendered'
    },

    initialize: function() {
      this.render();
    },

    render: function() {
      this.$el.append(this.template());
      return this;
    },

    hasRendered: function() {
      $('#gaugeChart').epoch({
        type: 'time.gauge',
        domain: [1, 100],
        format: function(v) {
          return v.toFixed(0);
        },
        value: 1
      });

    }
  });
  return ChartsView;
});

在上面的Backbone视图中，我在#gaugeChart元素上有一个click事件，这个方法有效，但我怎么会触发一个load事件，这样当视图加载时我可以调用一个JavaScript函数来添加epoch图表。我试图在渲染功能完成后触发hasRendered函数，但这不起作用。

Answer 1

最简单的方法可能是通过使用超时来延迟图表的呈现，以便在render函数完成后执行。例如

render: function() {
      this.$el.append(this.template());

      setTimeout(function () {
        $('#gaugeChart').epoch({
             type: 'time.gauge',
             domain: [1, 100],
             format: function(v) {
               return v.toFixed(0);
              },
          value: 1
        });
      },0);

      return this;
    },

另外，您可以采取的另一种方法是让路由器在将el附加到DOM之后调用视图的某种方法来呈现Epoch图表，或触发视图用于呈现图表的事件。 / p>

例如

showChart: function(){
     var chartView = new ChartsView();
    $('#page-wrapper').html(chartView .el);

  //render chart directly
   chartView.renderChart(); //this assumes there is a "renderChart" method in your view
   //or trigger some event for view to respond to
  //chartView.trigger('atachedToDom'); //with your view subscribing to this event
}

BackboneJS。如何在视图加载时将时期图表添加到视图中

1 个答案: