单个页面上的多个页面

Question

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

我想知道如何在原始页面顶部显示多个页面。就像你如何构建它一样。

如何使用骨干路由器来实现这一目标？

例如在 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”或“委托”，您将需要担心“死亡”和“取消委托”等。只需执行 die('.namespace').live('click.namespace') 将确保清理。

这是我的一个网站上的一个示例 -> http://www.kitgui.com/docs
但更好的例子是在客户部分，因为文档使用哈希历史记录相当简单。

2) 在覆盖层中使用 iframe 并为其分配一个 URL。

这是最简单的选项，但速度有点慢，因为调用的每个页面都必须具有完全独立的行为以及与 iframe 的依赖关系。此外，除非您有固定的覆盖窗口，否则您必须担心框架的大小等。

您必须让加载程序在加载时覆盖您的 iframe，然后让 iframe 与父级对话，告诉它已完成加载并隐藏加载程序。

我为多个网站执行了此操作，但其中一个是正在开发的网站，您可以在此处查看以获取代码 ->

http://dev.zipstory.com（登录并转到我的 zipstory 并单击“组”设置等以看到这个，只需查看源代码以了解我是如何做到这一点的）

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

Answer 2

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