2

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

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

在这一点上，我唯一的解决方案似乎是将模板移动到全局变量中，这很好，除了需要的 javascript 字符串转义/多行字符串。

这通常是如何处理的？

谢谢！

4

3 回答 3

4

使用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));
    }
  });
});
于 2012-01-27T21:56:06.760 回答
2

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

这个里面有 Backbone.LocalStorage，它可以帮助你处理离线的东西。

https://github.com/jcreamer898/Savefavs

这另一个只是构建应用程序的简单入门......

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

他们处理模板的方式是......

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();

});

于 2012-01-28T14:45:43.123 回答
1

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

将模板渲染器更改为与 JST 不同的东西真的很容易。即使可以在没有任何服务器端要求的情况下遵循总体思路，样板也提供了一个基本的 node.js 应用程序。

于 2012-01-29T00:25:37.167 回答