BackboneJS. Как добавить диаграмму эпохи в представление, когда изображение загрузилось

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 выше у меня есть событие click на th e #gaugeChart, и этот подход работает, но как бы я инициировал событие загрузки таким образом, чтобы при загрузке представления я мог вызвать функцию 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; 
    }, 

В качестве альтернативы другого подхода можно принять, чтобы иметь маршрутизатор либо вызвать какой-либо метод вашего зрения, чтобы сделать Epoch диаграммы после того, как он придает вашему эл к DOM или вызвать событие, которое на ваш взгляд будет использовать для отображения диаграммы.

Например

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 
}