Backbone.js Life Cycle View During Its Creation

Question

I am new to backbone.js and somewhat new to front-end work, and have not yet understood how the life cycle works.

We have a Django backend that provides us with html templates, which we mainly use only as frames. All logic is processed in Backbone modes.

The problem that I currently have is that I am trying to draw a graph, but the graphical display function does not find the representation based on the identifier, since it does not exist during the rendering function, but I do not know how to achieve this at a later stage.

I tried to create the view manually in the Chrome console after the page fully loaded and it works:

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

View:

  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 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'] }); }, 

});

Where is it created:

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

Can anyone clarify to me:

• How does the basic design to create a view work? What are the different stages?
• How should I handle this situation, for example? at what point in my code will there be an element from the html template so that I can call the graphic display function for it?
• Or is my architecture just fundamentally flawed? Should I try to do this in a completely different way?

Answer 1

FWIW, I think you're on the right track. But, as your question notes, you just got a few things out of order.

Strictly speaking, the life cycle built on the basis of basic concepts is not so much. When you create an instance, it calls initialization. In addition to this, it is up to you to decide what the presentation life cycle will be. When will it be done. When the displayed el will be attached to the DOM, when it will be removed from the DOM, when it will be closed and destroyed. It all depends on how you want to work with the view.

There are some things you do and add to make this life cycle more understandable, of course. For example, there are several excellent frameworks that, for example, sit on top of the spine. I recommend looking at LayoutManager, Thorax, Chaplin and my own Marionette as a starting point for this.

In more detail about your question, however, the plugin that you describe is very dependent on the HTML elements in the DOM before the plugin can run. This is common for visual plugins, as they often need to capture location information, css information, relative element positions, etc.

There are some very simple things you can do to make these types of plugins easier and make this work. I wrote a little about this on my blog: http://lostechies.com/derickbailey/2012/02/20/using-jquery-plugins-and-ui-controls-with-backbone/ - I hope this helps you get down the path.

In particular, what you want to see is the idea of ​​the onShow method. This is not a method that Balka understands on its own. This is a concept that you will need to add to your presentations and your applications. But the good news is that it is easy. Just add a method to your view and then call it at the right time:

 var AnotherView = Backbone.View.extend({ onShow: function(){ this.$el.layout({ appDefaultStyles: true}); } }); // instantiate the view var view = new AnotherView(); // render it view.render(); // attach it to the DOM $("#someDiv").html(view.el); // now that it has been attached to the DOM // you can call your DOM-dependent plugins view.onShow(); 

Hope this helps.

Answer 2

Just by looking at this, I think the problem is that the template does not return from the server before rendering it, so it does not appear. You can work around this problem using the jQuery deferred object (see this comment ). Try doing something like the end of initialize :

 this.deferredTemplate = $el.append(compiledTemplate); this.deferredTemplate.done(function() { this.render(); }); 

See also Derick Bailey's article on postponement in backbone.js: http://lostechies.com/derickbailey/2012/02/09/asynchronously-load-html-templates-for-backbone-views/

Answer 3

You create el, but do not attach it to the DOM, and I suspect that the chart is only looking for the DOM for the element to which it is attached. You need to attach it to the DOM before calling drawGraph.

Regarding creating a Backbone view, I think the best way to get an in-depth view is to simply read the annotated source code, which is actually not so long.