Correct pattern for underscore jst tempates when compiled by grunt-contrib-jst -undefined error

72 views Asked by At

I have managed to narrow down the error message I am receiving to one line.

ReferenceError: property is not defined

((__t = ( property )) == null ? '' : __t) +

The View Controller is as follows (simplified for brevity)

workSpace.viewMain = Backbone.View.extend({
// WORKS
// template: _.template($("#desk-view-main").html()), 
// DOESNT WORK
template: _.template(window.JST["public/js/app/templates/desk-view-main.html"]()), 
// DOESNT WORK
// template: _.template(window.JST["public/js/app/templates/desk-view-main.html"](), {"key": "value"}), 
el: '#pw-main',

initialize: function() {
  this.render();
},

render: function(a) {
  var dictionary = {"key": "value"}
  var html = that.template(dictionary);
  $(that.el).append(html);
}

});

The compiled file looks as follows

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

this["JST"]["public/js/app/templates/desk-view-main.html"] = function(obj) {
obj || (obj = {});
var __t, __p = '', __e = _.escape;
with (obj) {
__p += '  <nav id="tweak"></nav>\n  <div class="desk">\n    <h3>Workspace:</h3>\n    <strong> ' +
((__t = ( property )) == null ? '' : __t) +
'</strong>\n\n    <h3>end Workspace:</h3>\n  </div>\n</div>\n';

}
return __p
};

From the following public/js/app/templates/desk-view-main.html

<div class="desk">
  <h3>Workspace:</h3>
  <span> <%= property %></span>
  <h3>end Workspace:</h3>
</div>

So far I haven't been able to work out the correct pattern to use a compiled template with variables (it works fine if I remove the property variable).

0

There are 0 answers