javascript - 主干JS。如何在 View 加载后将纪元图表添加到 View

Question

我正在将 BackboneJS 与 RequireJS 一起使用，我想将纪元图表添加到 View 中。

我有什么:

我的 View 模板是:

<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 View 中，我在 #gaugeChart 元素上有一个点击事件，这种方法有效，但是我如何触发加载事件，以便在加载 View 时调用 JavaScript 函数添加纪元图。我尝试在渲染函数完成后触发 hasRendered 函数，但这没有用。

Answer 1

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

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 后调用您 View 的某些方法来呈现 Epoch 图表，或者触发您的 View 将用于呈现图表的事件。

例如

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
}