Question

目前正在将Rails 3.2+应用程序转换为使用Backbone.js来管理其前端。在转换前，应用程序在application.html.erb中呈现了多个布局部分。要想象，请考虑grooveshark - 左侧列和页脚，其中所有导航都发生在中央内容区域。重点是，左/右列，页脚和标题中的内容不是静态的。

这就是我认为application.jst.eco看起来像的样子。每个注释行都是一个地方，可以渲染另一个模板。

<!-- layouts/header -->

<div class="row-fluid">
  <div id="left-column" class="span3">
    <!-- layouts/left_column -->
  </div>

  <div class="span6">
    <section id="content">
      <header>
        <!-- notices -->
      </header>
      <!-- main content -->
    </section>
  </div>

  <div id="right-column"class="span3">
    <!-- layouts/right_column -->
  </div>
</div>

<!-- layouts/footer -->

我应该如何在Backbone中组织模板来复制我的application.html.erb结构？我甚至在想这个方向吗？

此外，我对Backbone应用程序的入口点感到困惑。由于我仍然会在application.html.erb中进行<%= yield %>调用，并通过erb视图预加载主页数据，如果在Backbone模板中定义了更大的布局，这将如何组合在一起？ / p>

Answer 1

有很多方法可以做到这一点，但这里只是作为一个例子我是如何做到的。

首先，除非支持非JavaScript启用的浏览器，否则根本不需要使用rails部分。 backbone.js应用程序的典型流程是：

服务器呈现基本布局，包括<head>，<body>等，但包含实际内容的占位符。例如，在我的应用程序中，我有导航栏的占位符和主要内容的占位符。
您的主干应用程序中的主要应用程序类（通常为App）会创建一个路由器，无论是来自路由器的initialize方法，还是来自您所在页面的路由处理程序，您创建和将视图渲染到页面上的占位符中。在我的情况下，因为导航栏永远不会被换出，我在路由器的initialize方法中渲染它，然后我在路由处理程序中渲染实际页面。（阅读this post以获取有关如何在页面上实际呈现视图的一些重要提示。）
如果您想要复合视图（比如项目列表，每个项目都有自己的视图），那么您将在父项目中渲染这些视图并将它们附加到父项元素< / em>（不直接发给文件）。这样可以保持页面元素的分离，这很重要。

Backbone已启动（通过Backbone.history.start），从那里开始，骨干接管。

在您的情况下，您可能希望为每个左/右列以及主要内容和标题（通知）创建视图，对于后两个（标题和主要内容），可能是复合视图。

希望有所帮助，可以提供更多细节，只需提出具体问题。附：我使用backbone-support来渲染复合视图，以确保在交换时正确删除它们并从DOM中取消绑定，以避免内存泄漏等。

在Backbone.js中组织嵌套模板

1 个答案: