1 files changed, 19 insertions, 9 deletions
diff --git a/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js b/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js
index d0c161f2aad..3885b0f43b2 100644
--- a/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js
+++ b/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js
@@ -1,6 +1,7 @@
 /* global Flash */
 
 import sqljs from 'sql.js';
+import _ from 'underscore';
 import Spinner from '../../spinner';
 
 class BalsamiqViewer {
@@ -52,6 +53,10 @@ class BalsamiqViewer {
     return thumbnails[0].values.map(BalsamiqViewer.parsePreview);
   }
 
+  getTitle(resourceID) {
+    return this.database.exec(`SELECT * FROM resources WHERE id = '${resourceID}'`);
+  }
+
   renderPreview(preview) {
     const previewElement = document.createElement('li');
 
@@ -62,13 +67,14 @@ class BalsamiqViewer {
   }
 
   renderTemplate(preview) {
-    let template = BalsamiqViewer.PREVIEW_TEMPLATE;
-
-    const title = this.database.exec(`SELECT * FROM resources WHERE id = '${preview.resourceID}'`);
-    const name = JSON.parse(title[0].values[0][2]).name;
+    const title = this.getTitle(preview.resourceID);
+    const name = BalsamiqViewer.parseTitle(title);
     const image = preview.image;
 
-    template = template.replace(/{{name}}/g, name).replace(/{{image}}/g, image);
+    const template = BalsamiqViewer.PREVIEW_TEMPLATE({
+      name,
+      image,
+    });
 
     return template;
   }
@@ -77,6 +83,10 @@ class BalsamiqViewer {
     return JSON.parse(preview[1]);
   }
 
+  static parseTitle(title) {
+    return JSON.parse(title[0].values[0][2]).name;
+  }
+
   static onError() {
     const flash = new Flash('Balsamiq file could not be loaded.');
 
@@ -84,13 +94,13 @@ class BalsamiqViewer {
   }
 }
 
-BalsamiqViewer.PREVIEW_TEMPLATE = `
+BalsamiqViewer.PREVIEW_TEMPLATE = _.template(`
   <div class="panel panel-default">
-    <div class="panel-heading">{{name}}</div>
+    <div class="panel-heading"><%- name %></div>
     <div class="panel-body">
-      <img class="img-thumbnail" src="data:image/png;base64,{{image}}"/>
+      <img class="img-thumbnail" src="data:image/png;base64,<%- image %>"/>
     </div>
   </div>
-`;
+`);
 
 export default BalsamiqViewer;