javascript - 一个页面上的多个页面

Question

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

我想知道您如何在原始页面之上显示多个页面。至于你如何构建它。

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

例如在 trello 中

主页

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

就像卡片的细节

像板子的细节

我如何构建这样的东西？

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，它将自动删除所有直接分配的事件，也就是“绑定(bind)”和“解除绑定(bind)”，但是使用“实时”或“委托(delegate)”您需要担心关于“die”和“undelegate”等。只需执行 die('.namespace').live('click.namespace') 即可确保已清除。

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

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

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

您必须有一个加载器在加载时覆盖您的 iframe，然后让 iframe 与父级对话以告知它已完成加载并隐藏加载器。

我为几个网站做了这个，但其中一个网站正在开发中，您可以在此处查看以获取代码 ->

http://dev.zipstory.com (登录并转到我的 zipstory 并单击“组”设置等以查看此内容，只需查看源代码即可了解我是如何做到的)

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