javascripttemplatesbackbone.jsmarionettejst

Backbone/Marionette JST Templates - No errors but no View shown


I recently needed to move to using a JST file for all my templates so I don't have a clutter of html templates everywhere.

I am building the JST file with grunt (using grunt-contrib-jst) and it creates the file "build/templates.js".

Below is an entry from there:

this["JST"] = this["JST"] || {};

this["JST"]["build/html/template-1.html"] = function(obj) {obj || (obj = {});var __t, __p = '', __e = _.escape;with (obj) {__p += '    <script type="text/template" id="template-1">\n        <span id="chat_title_1">' +((__t = ( title )) == null ? '' : __t) +'</span>\n        <span id="chat_symbol_1">▲</span>\n    </script>';}return __p};

I updated my backbone.marionette render method as per https://github.com/marionettejs/backbone.marionette/wiki/Using-jst-templates-with-marionette, where it asks to replace the Renderer.render method. See the change below:

Marionette.Renderer = {
  render: function(template, data){

  if (!JST[template]) throw "Template '" + template + "' not found!";
  return JST[template](data);
  }
};

So I have the following in my view:

App.ChatBoxView = Backbone.Marionette.Layout.extend({
    template: "build/html/template-1.html",
...

The page loads, there are no errors or anything, but there is nothing rendering on the page, no views, etc.

Is there something missing or done wrong?

Thank you.


Solution

  • Solved it... my template html files still had the <script ....> at the start and end. Removing that worked.

    Updated entry example in "templates.js":

    this["JST"] = this["JST"] || {};
    
    this["JST"]["build/html/template-1.html"] = function(obj) {obj || (obj = {});var __t, __p = '', __e = _.escape;with (obj) {__p += '<span id="chat_title_1">' +((__t = ( title )) == null ? '' : __t) +'</span>\n        <span id="chat_symbol_1">▲</span>';}return __p};