Menu
I'm running around in circles seemingly missing something in my current app implementing backbone.js. The problem is I have a master AppView, which initializes various subviews (a graph, a table of information, etc) for the page. My desire is to be able to change the layout of the page depending on a parameter flag passed along while navigating.
What I run into is a case where the subviews, which have reference to dom elements that would be in place after the template is rendered, do not have access to those elements during the main AppView initialization process. So the main question is how do I ensure that the proper dom elements are in place for each event bind process to get setup properly?
With the following code if I have an event bound to a model change within my LayoutView, the layout gets rendered but the subsequent views do not properly render. Some thing I have fiddled with has been to set all the views '.el' values to a static element within the html structure. This gets rendering to occur, though that seems to break away from the nice scoping ability provided by utilizing '.el'.
Sample Code:
//Wrapped in jquery.ready() function...
//View Code
GraphView = Backbone.View.extend({ // init, model bind, template, supporting functions});
TableView = Backbone.View.extend({ // init, model bind, template, supporting functions});
LayoutView = Backbone.view.extend({
initialize: function() {
this.model.bind('change:version', this.render, this);
},
templateA = _.template($('#main-template').html()),
templateB = _.template($('#secondary-template').html()),
render: function() {
if ('main' == this.model.get('version')) {
this.el.html(this.templateA());
} else {
this.el.html(this.templateB());
}
},
});
MainView = Backbone.View.extend({
initialize: function() {
this.layoutView = new LayoutView({
el: $('#layoutContainer'),
model: layout,
});
this.graphView = new GraphView({
el: $('.graphContainer'),
model: graph
});
this.tableView = new TableView({
el: $('#dataTableContainer',
model: dataSet
});
},
});
// Model Code
Layout = Backbone.Model.extend({
defaults: {
version: 'main',
},
});
Graph = Backbone.Model.extend({});
dataSet = Backbone.Model.extend({});
// Router code...
// Fire off the app
AppView = new MainView($('#appContainer'));
// Create route, start up backbone history
HTML: For simplicity I just rearranged the divs between the two layouts.
<html>
<head>
<!-- include above js and backbone dependancies -->
</head>
<body>
<script type="text/template" id="main-template">
<div class="graphContainer"></div>
<div class="dataTableContainer"></div>
<div>Some other stuff to identify that it's the main template</div>
</script>
<script type="text/template" id="secondary-template">
<div class="dataTableContainer"></div>
<div>Rock on layout version two!</div>
<div class="graphContainer"></div>
</script>
<div id="appContainer">
<div id="nav">
<a href="#layout/main">See Layout One</a>
<a href="#layout/secondary">See Layout Two</a>
</div>
<div id="layoutContainer"></div>
</div>
</body>
</html>
Appreciate insight/input that any of you guys may have. Thanks!
826
You've got a lot of missing code in your sample, but if I understand correctly, the issue is that you are trying to render views that depend on HTML generated by LayoutView, but the layout is being chosen asynchronously when the model is updated, so LayoutView hasn't been rendered yet.
There are (as with pretty much everything Backbone-related) multiple approaches to this, but in general:
If I have views who depend on a "parent" view being rendered, I'll put the responsibility for instantiating and rendering those views in the parent view - in this case, LayoutView, not MainView.
If the parent is being rendered asynchronously, it needs to perform that instantiation in the callback - here, the LayoutView.render() method.
So I might structure the code like this:
LayoutView = Backbone.view.extend({
initialize: function() {
this.model.bind('change:version', this.render, this);
// you probably want to call this.model.fetch() here, right?
},
templateA: _.template($('#main-template').html()),
templateB: _.template($('#secondary-template').html()),
render: function() {
if ('main' == this.model.get('version')) {
this.el.html(this.templateA());
} else {
this.el.html(this.templateB());
}
// now instantiate and render subviews
this.graphView = new GraphView({
// note that I'm using this.$ to help scope the element
el: this.$('.graphContainer'),
model: graph
});
this.tableView = new TableView({
el: this.$('.dataTableContainer'),
model: dataSet
});
// you probably need to call graphView.render()
// and tableView.render(), unless you do that
// in their initialize() functions
},
});
Note that you don't have to pass in an el at instantiation - you could instantiate subviews in initialize(), and set the el property in subview.render(). You could even instantiate in MainView.initialize(), as you do now, and pass the views to LayoutView to render asynchronously. But I think the above approach is probably cleaner.
169
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
