我想我没有正确使用 Backbone JS 的视图？

Question

我刚刚开始使用 Backbone（和 Underscore）JS。我们正在开发一个大型 iPad HTML5 应用程序，它需要在所有客户端上运行。该项目需要结构，而 Backbone 似乎很适合。似乎并没有太多妨碍，并且可以用作一个工具包（特别是因为也需要 Underscore）。

不过我有一个问题。这个 HTML5 应用程序基本上是一个单页应用程序。一切都从index.html 文件开始。我逐渐了解了 Backbone 管理 URL 片段的方式，我非常喜欢这种方式。设置将事件路由到特定模型很容易。

我正在开发的这个 HTML5 应用程序中有许多嵌套的“页面”层。大约有三层嵌套。这就是这个应用程序使用的 JSON 数据（我还没有进入本地数据库存储等，但也许我应该？只是想先了解一下 Backbone）。它们是普通网页，因此，它们只是已加载到网络应用程序各个部分的内容页面。

我一直在使用视图。我想我有这样的概念......用数据填充集合，视图是围绕这个数据集合构建的。据我所知，对于模型的单个实例，它有一个视图与之配合。然后，当您想要查看模型的集合时，您可以调用一个视图，该视图将迭代该集合并调用每个单独模型的视图。

抱歉，我知道我可能没有多大意义！

但基本上，我看到 Backbone Views 用于为单个模型、模型的 Collection 生成 HTML...所以这就是为页面的各个部分排序的所有小视图，但是整个页面的视图呢？假设这个 HTML5 应用程序有一个基本模板，但 web 应用程序的不同页面需要不同的整个页面布局，以便它们可以看起来像应该的样子？这种事你能做吗？基本上有一个视图可以通过 Ajax 调用来获取整个页面模板吗？

下面的示例是当 URL 位于应用程序的根目录时从主构造函数调用的视图。我想要设置类似这样的各种视图，当用户位于不同的 URL 时，我的应用程序需要显示这些视图。像我这里一样加载整个Ajax模板是错误的吗？还有哪些其他方法可以拥有单页面应用程序，同时还可以为网站的所有不同部分提供可管理的页面模板？

App.View.Home = Backbone.View.extend({
    tagName: "article",
    id: "view-home",
    initialize: function() {
        _.bindAll(this, "render");
    },
    render: function() {

        var that = this;

        $.get("templates/home.html", function(templateHtml) {
            $(that.el).html(_.template(templateHtml));

            // we want tabs in this template too
            var tabs = new App.View.Tabs();
            $(that.el).find('#main').html(tabs.render().el);

        }, "html");

        return that;
    },
});

如果这没有多大意义，我很抱歉...我一直在努力学习很多东西。

Answer 1

我真的不认为这种方法有什么问题，但在没有看到更多代码的情况下很难说。重要的是不要过度思考骨干。骨干网的设计目的只有几件事，除此之外，您可以根据自己的需要来利用该功能。

至于这个特定问题，我看不出有任何理由不应该做你在这里所做的事情。我绝对会确保您在需要之前不会加载/获取任何数据或模板。我还要确保您等到从服务器获得所需的所有数据后再渲染视图（这样视图就不会加载不稳定）。最后一点只是指导方针，与骨干没有任何关系。但老实说，这是backbone的特性之一：它能很好地完成一些事情，然后就不妨碍你了。

Answer 2

我认为最简单的方法是拥有许多视图和许多模板，从控制器创建视图并从视图创建模板。

我们一直使用 jqote2 进行模板化，效果很好，我们预先缓存所有模板并让数据驱动应用程序。

每个视图都可以呈现给定 div 的标记。

然后控制器可以创建多个视图，例如：-

App.Controllers.X = Backbone.Controller.extend({
   ....
   index: function() {
      new App.Views.View1({
         el: 'div#id1,
         ...
      });
      new App.Views.View2({
         el: 'div#id2,
         ...
      });
etc
   }

希望这有帮助