Rendered templates cache in Ember app

I am working on an Ember app. The page contains a infinite scroll list of files and a details pane. When a file is selected it is supposed to show a form to modify file details in the details pane.

// router.js
this.resource('files', function () {
  this.route('file', { path: '/:file_id' });
});

// templates/files.hbs
{{ #my-list-component params.. }}
  list-item-content
{{ /my-list-component }}
{{outlet}} // this is for the file details

There is no template for the file though. The requirement is that form template for a file is autogenerated on the server on request.

// routes/files/file
export default Ember.Route.extend({
  model: function(params) {
    return this.store.find('file', params.file_id);
  },
  afterModel: function(file, transition) {
    // make ajax call to the web service 
    // to get form template for the current file
    return Ember.$.ajax(config.APP.API_HOST + formPath).then(function(data) {
      ...
      Ember.TEMPLATES['files/file'] = Ember.Handlebars.compile(data);
      ...
    }
  }
});

There are only few different types of forms depending on the file type, but many files. Forms are quite big with many Ember components on them. It takes time to render them(there are also some calculations on render). Is there a nice way to cache already rendered forms? So that when a file is selected, it checks if this type of form was already rendered, gets it from cache and shows as is(binding will update data from current model)?