0

我正在开发一个大型混合移动应用程序（PhoneGap/HTML5），它必须包含大量视图和服务器调用。在网上搜索了一番后，我发现我可以用 RequireJS、Backbone 和 jQuery Mobile 来组织我的代码。我遵循了这个教程，这很有帮助，但我不是很满意......

问题是，当我按下链接或按钮时，RequireJS 会加载每个视图，它会替换前一个视图的内容……我的意思是，整个 HTML 代码之间<body></body>的内容都被新视图的内容替换了。如果我决定不替换以前的代码并附加新代码，那么应用程序可能不是非常用户友好的风险。

我曾想过将所有视图分开并将它们放在多个 HTML 文件中，并编写一个 Javascript 来加载所有 HTML 文件并将它们附加到主体，但我不知道这是否是一个好习惯以及我的应用程序是否会非常人性化。这是我如何组织代码的示例：

<!-- index.html -->
<!DOCTYPE html>
<html>
    <head>
        <!-- ... -->
    </head>

    <body>
        <!-- Here will be added the content of all the other HTML files -->
    </body>
</html>


<!-- homeView.html -->
<div data-role="header" data-theme="f">
    <h1 data-i18n="sections.home.title"></h1>
</div>

<div data-role="content">
    <h1 data-i18n="sections.home.welcome"></h1>
</div>


<!-- otherView.html -->
<div data-role="header" data-theme="f">
    <h1 data-i18n="sections.otherView.title"></h1>
</div>

<div data-role="content">
    <p data-i18n="sections.otherView.content"></p>
</div>

你们怎么看？有没有人有更好的解决方案？我的目标是构建一个强大、流畅和可维护的应用程序。

谢谢你的帮助。

4

1 回答 1

2

根据我的经验，Backbone 让您可以更精细地控制视图的显示方式：您应该能够只替换视图的一部分，而不必在“替换所有内容”和“附加到当前 HTML”之间进行选择。

将视图拆分为多个 HTML 文件通常是个好主意（尤其是考虑到您可以使用模板，例如使用下划线），但如果您的意思是这样，我认为您不应该一次加载所有内容。

如果您认为它会回答您的问题，我会给您一个更详细的示例，但基本上，如果您按下链接或按钮，您就可以捕获该事件并使用它做任何您想做的事情，而不是替换整个只改变一个元素。

编辑：我会在这里回答你剩下的问题。首先你应该看一下http://backboneboilerplate.com/，它很好地演示了如何构建主干应用程序。特别是，他们使用处理创建视图的视图管理器 (vm.js)。

使用类似这样的东西可以让您将视图的最后一个实例保存在内存中。例如，当您单击新闻项目时，您的路由器会导航到 /news/item/xx，然后您将使用视图管理器创建一个新闻项目并使用 localStorage 填充模型（如果您已经获取内容）或通过轮询服务器。查看视图管理器代码，你可以有这样的东西：

define([
  'jquery',
  'underscore',
  'backbone',
  'events'
], function($, _, Backbone, Events){
  var views = {};
  var create = function (context, name, View, options) {
    if(typeof views[name] !== 'undefined') {
      if (name === "homeview") {
        views[name].reinit(); // <==== re-initialize your view
        return views[name];
      }
      else {
        views[name].undelegateEvents();
        if(typeof views[name].clean === 'function') {
          views[name].clean();
        }
      }
    }
    var view = new View(options);
    views[name] = view;
    if(typeof context.children === 'undefined'){
      context.children = {};
      context.children[name] = view;
    } else {
      context.children[name] = view;
    }
    Events.trigger('viewCreated');
    return view;
  };


  return {
    create: create
  };
});

这样，视图管理器将您的主视图保存在内存中，并在您返回时重新初始化并返回它（我调用了 .reinit() 但它可以是任何自定义函数来将您的视图重置为您之前保存的状态并渲染它）

于 2013-08-02T13:23:47.047 回答