主干查看嵌套 [英] Backbone View Nesting
问题描述
我手忙脚乱看似缺少在我目前的应用中实施Backbone.js的东西。问题是我有一个主APPVIEW，这对于页面初始化各个子视图（图，信息表，等等）。我的愿望是能够改变取决于参数标志页面半天航行通过了布局。
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.
我碰上就是子视图，其中有参考的DOM，这将是到位的模板之后被渲染的元素，没有在主APPVIEW初始化进程访问这些元素的情形。所以，主要的问题是我怎么保证适当的DOM元素到位为每个事件绑定过程中得到正确安装？
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?
通过以下code，如果我有我的LayoutView内绑定到模型变化的事件，布局获取呈现，但随后的观点不正确渲染。有些事情我已经和拨弄一直到所有的意见.el设置值在HTML结构中的静态元素。这得到渲染发生，但似乎从利用'.el'提供的概略漂亮能力割舍。
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'.
样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：
为简单起见我只是重新安排了两个布局之间的div。
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>
鸭preciate洞察力/输入任何的你们可能有。谢谢！
Appreciate insight/input that any of you guys may have. Thanks!
推荐答案
您有很多样品中缺少code，但如果我理解正确，问题是，你正试图使该意见依赖于HTML由 LayoutView 生成，但布局是被异步选择时，模型更新，因此 LayoutView 不是招' ŧ尚未呈现。
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.
有（与pretty多一切骨干相关的）多种方法来这一点，但在一般
There are (as with pretty much everything Backbone-related) multiple approaches to this, but in general:
-
如果我有谁依赖于一个父的观点被渲染的意见，我就会把实例化和渲染父视图这些观点的责任 - 在这种情况下，
LayoutView，而不是的MainView。
如果父母正在异步呈现，它需要在回调执行实例 - 在这里， LayoutView.render（）法
If the parent is being rendered asynchronously, it needs to perform that instantiation in the callback - here, the LayoutView.render() method.
所以我可能结构化code是这样的：
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
},
});
请注意，您不必在报在实例传递 - 你可以在实例初始化子视图（），并设置 MainView.initialize（），因为你现在做的，并通过意见 LayoutView 渲染异步。但是，我觉得上面的方法可能是清洁工。
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.
这篇关于主干查看嵌套的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
