单页上有多个页面

Question

我正在使用backbone.js并构建一个单页应用程序，灵感来自trello.com ..

我想知道如何在原始页面上显示多个页面。就像你如何设计它一样。

如何使用Backbone路由器实现这一目标？

例如在trello

中

的BasePage

然后现在在基页的顶部有动态内容

像卡片细节一样

就像董事会的细节一样

我怎么能构建这样的东西？

Answer 1

到目前为止，我已经在50多页的项目中做了几个方法，并且它们都很好。我没有使用backbone.js，但这些方法很简单，除了我使用jQuery作为选择器之外，不需要学习框架。

他们两个共同创建了一个叠加窗口，您可以将内容拉入窗口。我从头开始写我的，但你可以轻松使用jQuery UI对话框。这两种方法仅在内容的提取方式上有所不同。此外，您可以使用链接上的信息来提取“模块”或覆盖内容作为您的规则。不需要加载大量脚本来启动您的应用程序。让模块为您提供行为。

选项1）使用jQuery加载方法通过使用占位符变量从独立网页中提取内容，如下所示：

var $ph = $('<div />'); 
$ph.load(URL); // loads gui of remote URL + executes any script that URL has

$ ph var现在包含从外部URL加载的所有GUI，因此您可以使用选择器提取特定的HTML并将其放入DOM或叠加层中。

以下是独立HTML输出的示例：

<div class="module">
    <a class="link">click me</a>
</div>
<script>
(function(){
    // put any private vars here
    $('.module .link').click(function(){
        // do something
    });
})();
</script>

如果你通过jQuery删除（）或破坏覆盖内的dom，它将自动删除所有直接分配的事件，即“绑定”和“解除绑定”它们但是使用“live”或“delegate”你需要担心关于“die”和“undelegate”等只是做死（'。namespace'）。live（'click.namespace'）将确保清理。

以下是我的某个网站上的示例 - ＆gt; http://www.kitgui.com/docs 但更好的例子是在客户部分，因为使用哈希历史记录文档非常简单。

2）在叠加层中使用iframe并为其指定一个网址。

这是最简单的选项，但速度稍慢，因为每个被调用的页面必须具有完整的独立行为和iframe的依赖关系。除非你有一个固定的覆盖窗口，否则你必须担心框架的大小等。

你必须有一个加载器覆盖你的iframe，然后它的加载然后让iframe与父进行对话，告诉它完成加载并隐藏加载器。

我为多个网站做了这个，但其中一个是开发中的网站，你可以在这里看到以获取代码 - ＆gt;

http://dev.zipstory.com（登录并转到我的zipstory并点击“群组”设置等查看此内容，只需查看来源，看看我是如何做到这一点的所有内容）

关于iframe的问题是，您应该在父级上编写一些代码，这些代码接受来自您同意的iframe的标准消息，作为一组典型行为，例如通知其完成加载或传递消息以更新父级等内容。只要您的目标是KISS方法，就可以随时添加，并根据需要进行重构。

Answer 2

每个“动态内容”页面都应该是骨干视图呈现的模板（underscore.js为您提供_.template（））。主页面需要具有初始化新视图和渲染模板的事件。查看todos应用程序（http://documentcloud.github.com/backbone/docs/todos.html）以获得有关骨干应用程序流程的基本概念。