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

Question

I have this piece of code where I want to load my HTML template from an external files inside a view folder.

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

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

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

});

app is the main view of my application, I know the issue with the XHR request with local files where I can't load that for security reason.

I know that this is a problem with browsers, but with phonegap application the issue is the same?

Which is the best alternative to accomplish the same feature keeping HTML files separate from scripts?

I have already saw require.js and text.js library for loading HTML files without $.get but there is again the same dependency on XHR restrictions.

Answer 1

It can be much more performant to precompile your templates, rather than requesting them dynamically. One way to do this is to use Grunt to build them into a JST namespace - https://github.com/gruntjs/grunt-contrib-jst .

Then in your Gruntfile, something like this:

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

In your Backbone View:

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

  template: JST['views/inputCapo'],

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

});

Then just be sure to include the path/to/compiled/templates.js script in your index.html file before your Backbone views.