Question

我有一个带有多个模型，视图，集合和模板的backbone.js应用程序（在带有文本/模板类型的脚本标记中，视图用于使用_.template加载模板的ID（$（id） html的（）））。

目前，以上所有内容都在一个文件中，这使得它非常难看。这是一个离线应用程序（即，它从本地文件系统加载并与允许跨源请求的Web服务器对话）。我一直试图找出如何将视图，模型和模板移动到单独的文件，我尝试将视图和模型移动到views.js和models.js，但视图取决于模板和模板不能放入views.js（因为它是一个JS文件，因此不能有脚本标签..）。

此时我唯一的解决方案似乎是将模板移动到全局变量中，除了需要的javascript字符串转义/多行字符串之外，这将是正常的。

这通常如何处理？

谢谢！

Answer 1

使用RequireJS将您的视图和模型打包成模块，RequireJS将为您处理依赖项解析。您也可以通过这种方式获取每个文件的一个视图或模型，而不是将它们全部放在一个views.js或models.js中。

然后，使用text!插件将模板存储在文本文件中，并像普通模块一样要求它们。

define(function (require, exports, module) {
  var templateText = require("text!./person.tmpl");
  var $ = require("jquery");

  exports.PersonView = Backbone.View.extend({
    render: function () {
        doStuffWith(_.template(templateText));
    }
  });
});

Answer 2

看一下使用Backbone和RequireJS的这些入门应用程序。

其中有一个Backbone.LocalStorage，它可以帮助您处理离线内容。

https://github.com/jcreamer898/Savefavs

另一个只是构建应用程序的简单启动器......

https://github.com/jcreamer898/RequireJS-Backbone-Starter

他们可以使用is ...

处理模板

define([
        'jquery', 
        'backbone',
        'underscore', 
        'models/model',
        'text!templates/main.html'], 
function($, Backbone, _, model, template){
    var MyView = Backbone.View.extend({
        initialize: function(){
            this.template = _.template(template);
        },
        render: function(){
            this.template(model);
        }
    });
    return new MyView();

}）;

Answer 3

您可能想查看Backbone boilerplate。这为您的主干应用程序添加了一个很好的模块化结构，而不会污染全局命名空间，并提供了一个简单的模板缓存。

将模板渲染器更改为与JST不同的内容非常容易。即使可以遵循一般的想法而没有任何服务器端要求，样板文件也提供了一个基本的node.js应用程序。

构建backbone.js应用程序

3 个答案: