CODEWITHSUNDEEP
javascriptjquerytemplatesember.jshandlebars.js
Zach Shallbetter
Zach Shallbetter

Reputation: 1911

Store template data as a string in Ember

I'm using Ember and an upload plugin. The plugin allows me to overwrite it's HTML template through a property as a string.

$("#fileUpload").dropzone({
   previewTemplate: ' some huge html string',
});

Adding in a string of HTML would be difficult to support and look awful so I created an external Handlebars .hbs file which houses the template HTML.

Normally I would populate this template without an issue using $.get(). However, I imagine that Ember has a way to do this intelligently. I've dug through the API and haven't seen anything specific to help me with this.

I would think something like var template = Ember.Handlebars.get('upload.hbs'); would work but it returns an error.

Any help would be appreciated.

Upvotes: 1

Views: 598

Answers (1)

Scott
Scott

Reputation: 21501

Just trying to summarise what you are doing, after clarification from my previous (deleted) answer.

  • You have a plugin, that accepts a plain html string.
  • The html string you want to provide to the plugin is very long.
  • You want to store the string as an external file, to avoid including in your regular code.
  • The html string is not a Handlebars template though you store it as upload.hbs.
  • You were hoping that Ember would have a method for loading remote templates, that you could use to avoid using jQuery GET.

No method to load remote templates:

The reality is that Ember does not have a built in method for loading remote template files in their raw format. It does however allow you to precompile handlebars templates to JavaScript that can be included as a regular script tag. But as you are not using a handlebars template pre-compilation would do nothing more than wrap your html string in some JavaScript.

Why Ember.Handlebars.get('upload.hbs') won't work:

This method is used to get the content of locally included templates. That means it only looks for templates that exist in the Ember.TEMPLATES array or from the <script> tags of type text/x-handlebars.

The reason why Ember does not have the ability to load remote template files:

It does not have a method for loading in raw handlebars files because:

  • Many people use the precompiled handlebars files (which can be loaded as remote JS)

  • Many people use the inline <script type="text/x-handlebars"></script> tags.
    It's notable that you cannot use the src attribute of script to pull in a handlebars template, because browsers will only accept src for text/javascript.

  • Ember relies on jQuery, and as jQuery provides suitable methods GET & AJAX it's trivial to implement in conjunction with Ember.Handlebars.compile("<strong>Hello {{name}}</strong>"), if required.

Your template:

As you are not using a Handlebars template and you are just loading html, the correct approach, as you suspected is simply jQuery GET.

$.get( "dropZoneUploadTemplate.html", function(template) {
    $("#fileUpload").dropzone({
        previewTemplate: template
    });
});

Summary

While it is nice to use Ember where possible, this simply is a jQuery task. Sorry it's not the answer you were hoping for. Maybe in future versions of Ember it will include such as feature.

Making the uploader into an Ember Component:

You could turn your uploader into an Ember Component like this, and combine with the jQuery GET to take care of loading in your html.

App.FileUploadComponent = Ember.Component.extend({
    template: Ember.Handlebars.compile("<input type='file' />"),
    didInsertElement: function(){
        var c = this.$(":file");
        $.get("dropZoneUploadTemplate.html", function(template){
            c.dropzone({ previewTemplate: template });
        });
    }
});

This would mean every time you want to use the upload control in your Ember templated view you can simply do:

{{file-upload}}

I hope this helps.

Upvotes: 3

Related Questions