javascript - 如何与主干同步加载外部模板

Question

我正在尝试使用phonegap、backbone.js 和coffeescript 构建一个移动应用程序。我想做这样的事情：

class MyApplication.Views.EntriesIndex extends Backbone.View
  template: load('my/template') //It will load the external file my/template.tpl

  render: ->
    $(@el).html(@template())
    this

我想同步加载它。我已经看过 require.js，但我觉得这个简单的想法太复杂了。我看到我可以将 JST 用于 Rails 应用程序，但我不知道如何在没有 sprocket 的情况下使用它，而且我的应用程序必须只能在客户端工作。

同步加载模板的更好方法是什么？

我认为最好是预加载它。

我的应用程序将托管在客户端。

Answer 1

我这样做了：

class HomeView extends Backbone.View
  template: ->
    template = "views/home.html"
    cache = window.templates[template]
    return cache if cache

    cache = $.ajax(
      url: "views/home.html"
      async: false).responseText

    window.templates[template] = cache
    return cache

  render: ->
    @$el.html(@template())

而且，在我的应用程序的初始化中：

window.templates = {}

所以我可以异步加载模板并缓存它。显然，我会进行一些重构，并且可能会将其放入 JQuery 函数中。

感谢您的帮助。

编辑

我改变我的代码来做到这一点：

class Loader
  @files: {}
  @load: (path) ->
    return @files[path] ||= $.ajax(url: path, async: false).responseText

现在我可以这样做了：

class HomeView extends Backbone.View
  template: ->
    Loader.load("views/home.html")

  render: ->
    @$el.html(@template())

这是javascript的版本：

var Loader;

Loader = (function() {

  function Loader() {}

  Loader.files = {};

  Loader.load = function(path) {
    var _base;
    return (_base = this.files)[path] || (_base[path] = $.ajax({
      url: path,
      async: false
    }).responseText);
  };

  return Loader;

})();

我可能会在github上发布代码......

Answer 2

我以这种方式加载我的模板：

         $.ajax({
            url     : 'my/template.tpl',
            async   : false,
            success : function(tpl) {
                //do something with the template
            }
        });

也许它的解决方案也适用于您..

Answer 3

如果您的应用程序作为 phonegap 应用程序运行，您不妨在 HTML 中包含您的模板：

<script type = "text/template"> ... </script> 的解释