个人中心
文章发布
退出
作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
25
4
我在原地转圈，似乎在我当前实现 backbone.js 的应用程序中遗漏了一些东西。问题是我有一个主 AppView，它为页面初始化各种 subview (图形、信息表等)。我的愿望是能够根据导航时传递的参数标志更改页面布局。
我遇到的情况是， subview 引用了模板呈现后的 dom 元素，但在主 AppView 初始化过程中无法访问这些元素。因此，主要问题是如何确保为每个事件绑定(bind)过程设置正确的 dom 元素以正确设置？
使用以下代码，如果我有一个事件绑定(bind)到我的 LayoutView 中的模型更改，则会呈现布局，但后续 View 不会正确呈现。我摆弄过的一些东西是将所有 View “.el”值设置为 html 结构中的静态元素。这会导致渲染发生，尽管这似乎脱离了使用“.el”提供的良好范围界定能力。
示例代码:
//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>
<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>
感谢你们任何人可能拥有的见解/意见。谢谢!
最佳答案
您的示例中缺少很多代码，但如果我理解正确，问题是您正在尝试呈现依赖于 LayoutView 生成的 HTML 的 View ，但是在更新模型时异步选择布局，所以 LayoutView还没有被渲染。
有多种方法(与几乎所有与 Backbone 相关的东西一样)，但总的来说:
如果我有依赖于呈现“父” View 的 View ，我将负责在父 View 中实例化和呈现这些 View - 在本例中为 LayoutView , 不是 MainView .
如果父级异步呈现，则需要在回调中执行该实例化 - 此处为 LayoutView.render()方法。
所以我可能会这样构造代码:
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
},
});
请注意，您不必传入 el在实例化时 - 您可以在 initialize() 中实例化 subview , 并设置 el属性(property) subview.render() .您甚至可以在 MainView.initialize() 中实例化，就像你现在所做的那样，并将 View 传递给 LayoutView异步渲染。但我认为上述方法可能更清洁。
关于javascript - 主干 View 嵌套，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7654543/
25
4
0
所以我试图设置“内容”类的高度，但它似乎不起作用。我对嵌套 DIV 非常陌生，我已经尝试了我在谷歌搜索中发现的修复程序，但似乎没有任何效果。帮助？
好的，所以我一直在四处寻找，但找不到这个问题的答案。但是，我需要将一个 View 嵌套在另一个 View 中。 我有一个 $layout 正在使用我拥有的 default.layout Blade 文
好的，所以我一直在四处寻找，但找不到这个问题的答案。但是，我需要将一个 View 嵌套在另一个 View 中。 我有一个 $layout 正在使用我拥有的 default.layout Blade 文
基本上，我的问题很简单，但它需要知道 Struts 1.1 并且还活着的人。 我尝试构建的伪代码看起来像这样: IF element.method1 = true THEN IF element
我正在尝试将 Excel 嵌套 IF 语句转换为代码语言，但我不确定我是否正确执行此操作，希望能得到一些帮助 这是Excel语句: =IF(D3="Feather",IF(OR(I3>1000,R3=
如果我们创建两个或三个评论并对其进行多次回复，则“有用”链接在单击时会导致问题，它会对具有相同编号的索引执行 ng-click 操作，从而显示具有相同索引的所有文本。如何解决此嵌套问题，以便在单击链接
我在项目中使用Scala，想与Stripe集成，但它只提供Java API。例如，要创建 session ，我使用: val params = new util.HashMap[String, Any
以下代码有一个 Div，其中连续包含四个较小的 Div。四个 Div 中的每一个还包含一个较小的 Div，但此 Div 未显示。我尝试了各种显示和位置组合，看看 div 是否会出现。 classGoa
我在这里有一个问题，循环是: for (i=0; i < n; ++i) for (j = 3; j < n; ++j) { ...
我正在尝试编写代码来显示具有奇数宽度的形状。形状完成后，将其放置在外部形状内。用户将能够输入用于形状的字符和行数。我希望生成一个形状，并通过 for 循环生成一个外部形状。 ***** .
$(".globalTabs").each(function(){ var $globalTabs = $(this); var parent = $globalTabs.parent
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 9 年前。 Improve th
所以我在这个问题上遇到了一些麻烦，因为变量 i。我只是不确定在第二个 while 循环中如何处理它。对于我的外循环，我知道它将运行 log_4(n^2) 次迭代。对于内部 while 循环，我计算的迭
我似乎找不到在枚举上应用多个 if/then 逻辑的工作方式。 anyOf 不应用条件逻辑，而是表示如果其中任何一个匹配则很好。 allOf 再次不应用条件逻辑，而是测试属性/必填字段的超集。 这是一
如何访问 ReaderT 的内部 monad。 在我的例子中，我有类型: newtype VCSSetupAction a = VCSSetupAction (ReaderT (Maybe VCSCo
这个问题在这里已经有了答案: Add leading zeroes/0's to existing Excel values to certain length (7 个回答) 7年前关闭。 我正在寻
我已经绑定(bind)了很多 AND/OR 函数的组合并且没有运气。 这是我需要创建的: 在 B 列中，我有公司 ID，范围从两个数字字符到六个数字字符。 我需要在 B 列中的每个公司 ID 之前的每
我是 VBA 新手，在尝试编写的宏中使用 If 语句时遇到了一些困难。每个月我都会收到一份 Excel 报告，其中列出了我们公司的哪些员工执行了某些任务。我正在编写的宏旨在将每个员工的数据复制并粘贴到
如果在 B 列中找到单元格 A1 中的值，则使用文本 321 填充除非在 C 列中找到单元格 A1 中的值，在这种情况下填充文本 121反而。如果单元格 A1 的内容不在 B 列或 C 列中，则使用
我有几十万个地址。其中一些在整数之后有粒子。如 4356 A Horse Avenue , 其他格式正常4358 Horse Avenue .有些有“A”，有些有“B”。我正在尝试删除整数和粒子之间的
我是一名优秀的程序员,十分优秀！