Жизненный цикл представления Backbone.js во время его создания

Я новичок в backbone.js, а также немного новичок в фронтальной работе -и еще не совсем понял, как работает жизненный цикл.

У нас есть серверная часть Django, которая предоставляет нам html-шаблоны, которые мы в основном используем только как фреймы. Вся логика обрабатывается в представлениях Backbone.

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что я пытаюсь нарисовать график, но функция построения графика не находит представление на основе идентификатора, поскольку оно не существует во время функции рендеринга, но я не знаю, как это сделать. достичь этого на более позднем этапе.

Я пытался создать представление вручную в консоли Chrome после полной загрузки страницы, и оно работает:

   var main = new MainView();
   main.showChart();

Вид:

   var ChartView = Backbone.View.extend({

     title: 'Chart',

     initialize: function() {

    // This assures that this refers to this exact view in each function
    // (except within asynchronous functions such as jquery each)
    _.bindAll(this);

    // Saving parameters given by parent
    this.index = this.options.index;

    // Retrieve the template from server
    var template = _.template(getTemplate('chart.html'));

    // Compile the template with given parameters
    var compiledTemplate = template({'title': this.title});

    // Set the compiled template to this instance's el-parameter
    this.$el.append(compiledTemplate);

    // Rendering the view
    this.render();
 },

   render: function() {

    var self = this;

    // Draw the graph when the page is ready
    $(function(){
        self.drawGraph('chart1', this.line1Data);
    });

    // Render function should always return the instance
    return this;
},

drawGraph : function(chartId, lineData) {

    Morris.Line({
          element: chartId,
          data: [
            {y: '2012', a: 100},
            {y: '2011', a: 75},
            {y: '2010', a: 50},
            {y: '2009', a: 75},
            {y: '2008', a: 50},
            {y: '2007', a: 75},
            {y: '2006', a: 100}
          ],
          xkey: 'y',
          ykeys: ['a'],
          labels: ['Series A']
    });
},

} );

Где он создан:

     var chartWidgetView = new WidgetView({'contentView': new ChartView()});
    this.initializeWidget(chartWidgetView);
    this.$el.append(chartWidgetView.el);

Может ли кто-нибудь объяснить мне:

  1. Как Backbone обрабатывает создание представления? Каковы различные этапы?
  2. Как мне справиться с этой ситуацией, например. в какой точке моего кода будет существовать элемент из шаблона html, чтобы я мог вызвать для него функцию построения графика?
  3. Или моя архитектура просто в корне ошибочна? Должен ли я попытаться сделать это каким-то совершенно другим способом?
7
задан Lars Kotthoff 14 August 2012 в 20:48
поделиться