放置模板视图和主干视图代码的最佳做法是什么

Question

我正在使用 Backbone.js 创建一个 ASP.Net MVC 3 应用程序。我也在使用 jQuery 模板作为视图。

我的问题是如何有效地组织文件？

目前，我有一个用于主干应用程序的 XXX.js 文件和存储在显示主干应用程序 Index.cshtml 的页面中的内联模板。如何将模板移动到可以包含的不同文件中，例如包含 XXX.js？

App/
  Scripts/
    backbone.js
    underscore.js
    jquery-1.6.4.js
    jquery.tmpl.js
    myBackboneApplication.js
  Views/
    Home/
      Index.cshtml
  Controllers/
    HomeController.cs

我想将模板从 Index.cshtml 移到与 myBackboneApplication.js 相关的内容中。我可以将其作为文件包含在 Index.cshtml 中而不是内联。

Answer 1

您可以查看this related question。两个基本选项是：

1. 将模板创建为字符串，并将 Javascript 文件包含在索引文件中。

2. 在单独的文件中将模板创建为 HTML，并在构建时将它们插入到索引文件中，很可能在 <script type="text/template"> 标记中。

在我当前的 Backbone.js 项目中，我使用第二个选项 - 我将所有模板保存在一个单独的文件夹中，并在我的 ant 构建期间将它们插入到我的索引文件中。每个模板（例如my-view-template.html）都插入到带有id="my-view-template" 的<script> 标记中，然后我使用jQuery 创建模板，使用$("#my-view-template").html() 作为模板字符串。