0

我正在构建一个带有“页面内容”区域和主要导航链接的单页网站。单击链接运行动画并将内容（和 html）加载到“页面内容”区域。

我对 MVC 有很好的理解，但是在 javascriptMVC 框架的上下文中，我在设计我的应用程序时遇到了一点问题。在我前进的过程中，我将添加很多 JavaScript（和 JavaScript 动画），因此我想为我的网站打下良好的基础。

  • 我是否有一个模型（索引），其中包含我要添加的数据（和 html）？

  • 我是否有一个带有动作的页面（索引）控制器（动画然后从固定装置加载数据）？

  • 我如何将每个链接指向一个动作？

基本上，我如何使用javascriptMVC 框架从概念上设计页面？

4

1 回答 1

1

实际上，我现在正在为我正在为 iPhone 构建的 PhoneGap 应用程序做一件非常相似的事情。它是一个单页 javascript 应用程序。这是我正在使用的基本架构：

  1. 所有页面更改均使用普通<a href="/stuff/things/"></a>标签完成。href 是一个“有效”的 href - “/stuff/things/”。

  2. 我有一个将 URL 正则表达式映射到控制器的对象。所以类似的东西/recipes/\d+?/会捕获任何像 /recipes/10/ 或 /recipes/5/ 这样的 url 并调用指定的控制器。

  3. 我将一个事件绑定到检查链接点击的文档，并使用我的各种正则表达式检查链接的 href 属性。如果有匹配，它会启动一个“pagechange”。

  4. pagechange 函数用于history.pushState()更改 URL，然后将预设数据对象传递给控制器​​。该数据对象的一部分是一个匿名的“完整”功能，一旦完成，控制器本身将使用该功能。

  5. 传入“完成”函数的原因通常是页面更改涉及异步活动，例如使用 ajax 查询数据库。它还允许我们将“页面更改”行为保留在代码的一个部分中，并且控制器实际上只构建了一个 html 块并将其附加到 DOM。此时控制器调用传入的 complete() 函数，并且 pagechange 函数完成它的工作。

您可以在以下位置查看我的整个框架：http ://eatery.decoratelife.net/eatery.js

这不是一个“真正的”MVC。因为我真的没有模型或视图。视图是通过将数据对象与类似于 Mustache JS 的 HTML 模板字符串合并来处理的，而模型是通过对远程 mongoDB 的 API 调用来完成的。但我认为这说明了解决您的问题的一种体面的方法。

于 2012-02-29T05:29:07.313 回答