在Phonegap / Cordova应用程序中使用Backbone加载HTML本地模板文件

Question

我有这段代码，我想从View文件夹中的外部文件加载HTML模板。

var InputView = Backbone.View.extend({
  tagName: 'form',

  template: _.template($.get('views/inputCapo.html')),

  render: function(){
    app.$el.append(this.template);
    return this;
  }

});

app是我的应用程序的主视图，我知道XHR请求与本地文件有关的问题，出于安全原因，我无法加载该文件。

我知道这是浏览器的问题，但是使用phonegap应用程序的问题是一样的吗？

哪种最佳方法可以实现使HTML文件与脚本分开的相同功能？

我已经看到require.js和text.js库用于加载没有$.get HTML文件，但是对XHR限制的依赖仍然相同。

Answer 1

预编译模板，而不是动态地请求模板，可以提高性能。 一种方法是使用Grunt将它们构建到JST命名空间中-https: //github.com/gruntjs/grunt-contrib-jst 。

然后在您的Gruntfile中，如下所示：

jst: {
  compile: {
    files: {
      "path/to/compiled/templates.js": ["path/to/source/**/*.html"]
    }
  }
}

在您的骨干网视图中：

var InputView = Backbone.View.extend({
  tagName: 'form',

  template: JST['views/inputCapo'],

  render: function(){
    app.$el.append(this.template());
    return this;
  }

});

然后，只需确保在Backbone视图之前在index.html文件中包含path/to/compiled/templates.js脚本即可。