0

I need to get handlebars templates in Javascript. So I create template file in tpl folder and wrote such line in ML:

<resource type="download" name="tpl/" location="/tpl"/>

if I put some image to this folder I can to get it from CSS:

.css
 {
background: url(tpl/image.png);
}

if I want to get this image from js AJS.$("css").css("background", "url(tpl/image.png)") I have the error - file not found;

image file is for example.. In real I need to get template

 AJS.$.ajax({
                    url: "tpl/backlog_coll.handlebars",
                    cache: true,
                    success: function(data) {
                        source    = data;
                        template  = Handlebars.compile(source);
                        $('#backlog_coll').html(template);
                    }
                });

1 Answer 1

0

Here's how I would do that

I will write a function in a generally accessible js file (lets call it Global.js for now) as shown below

GLOBAL.JS

function fnGetTemplate(strName) {
if (Handlebars.templates === undefined || Handlebars.templates[strName] === undefined) {
$.ajax({
   url : "tpl" + strName + ".handlebars",
   success : function(data) {
       if (Handlebars.templates === undefined) {
           Handlebars.templates = {};
       }
       Handlebars.templates[strName] = Handlebars.compile(data);
   },
   async : false
 });
}
return Handlebars.templates[strName];
}

This is assuming I have the handlebars js library (something like handlebars-v1.3.0.js) referred to appropriately.

Then inside the View where I need the template to show up, I would declare the template as shown below

template: fnGetTemplate("backlog_coll");

Inside the render function of my view I would call this template supplying the needed data as show below

render: function() {
    this.$el.html(this.template(data));
}

Hope this helps

2
  • This method do not found templates too. it should be like /jira/s/ru_RU-g6ghuq/773/3/1.0-SNAPSHOT/_/download/resources/com.swan.agile.swan-agile:swan-agile-scrumboard/tpl/" + strName + ".handlebars
    – waldemar
    Jun 20, 2014 at 16:54
  • Actually in the example I hardcoded the path as "tpl" just for ease of explanation. In reality, you should take it out as a variable value so that you can dynamically populate the path of that template, as shown below function fnGetTemplate(strPath, strName) { if (Handlebars.templates === undefined || Handlebars.templates[strName] === undefined) { $.ajax({ url : strPath + strName + ".handlebars", and call it as template: fnGetTemplate(strPath, strName);
    – eshcol
    Jun 21, 2014 at 13:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.