{"id":2851,"date":"2014-02-25T06:58:54","date_gmt":"2014-02-25T06:58:54","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/02\/25\/backbone-js-and-handlebars-using-grunt-contrib-handlebars-collection-of-common-programming-errors\/"},"modified":"2014-02-25T06:58:54","modified_gmt":"2014-02-25T06:58:54","slug":"backbone-js-and-handlebars-using-grunt-contrib-handlebars-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2014\/02\/25\/backbone-js-and-handlebars-using-grunt-contrib-handlebars-collection-of-common-programming-errors\/","title":{"rendered":"Backbone.js and Handlebars – Using grunt-contrib-handlebars-Collection of common programming errors"},"content":{"rendered":"

I’m just wondering if anyone has had experience using this plugin in a backbone project.<\/p>\n

Instead of having all my script template tags in a single index file, I wanted to house my templates in the same directory as my views that required them.<\/p>\n

So I was hoping i could use the node option to require the local template and render to it and then append to an #id on my index file (which I’ll sort out laster).<\/p>\n

So basically I have my handlebars template (template.hbs) and its compiled js (template.js) alongside my backbone view, index.coffee.<\/p>\n

public\n   |_ coffee\n      |_views\n        |_card\n           |_list\n              index.coffee\n              template.hbs\n              template.js\n<\/code><\/pre>\n
Just as a reference, my grunt file looks like this:<\/p>\n
handlebars: {\n      compile: {\n        options: {\n          namespace: 'MyApp.Templates',\n          node: true\n        },\n        files: {\n          \"public\/coffee\/views\/card\/list\/template.js\": \"public\/coffee\/views\/card\/list\/template.hbs\"\n        }\n      }\n    },\n<\/code><\/pre>\n
In my backbone view (index.coffee) I was hoping to require the handlebars template like so:<\/p>\n
class CardList extends Backbone.View\n    template: require('.\/template')\n\n\n    . \n    do some other shiz\n    .\n\n\nrender: =>\n    template = Handlebars.compile($(this.template).html())\n    html = template\n        model: this.model\n    $(this.el).html(html)\n<\/code><\/pre>\n
Rendering this is spitting out this error in the inspector:<\/p>\n
Uncaught [object Object]\n\n> template = handlebars.compile($(this.template).html());\n<\/code><\/pre>\n
I obviously dont know what I’m doing, so I’m hoping someone could shed some light on how I can use this plugin properly.<\/p>\n
I’m using grunt-contrib-handlebars v0.3.5<\/p>\n
Any help is appreciated.<\/p>\n
Thanks<\/p>\n
    \n
  1. \n
    Look inside your template.js file that you’re including. grunt-comtrib-handlbars should have precompiled it into a Javascript function for you, so there’s no need to call Handlebars.compile anymore. You could just remove that template = Handlebars.compile line.<\/p>\n<\/li>\n
  2. \n
    You might be able to achieve that by building the files object dynamically.<\/p>\n
    Maybe something like this, although I’m not sure if cwd<\/code> supports globbing patterns. I’m also not sure if dest<\/code> is relative to cwd<\/code>. If this is not the case, this will not work, but it’s worth a shot.<\/p>\n
    handlebars: {\n  dist: {\n    options: {\n      namespace: 'MyApp.Templates',\n      node: true\n    },\n    \/\/ Glob for a directory of files, builds the files object, then map each\n    \/\/ one to a new destination file.\n    expand: true,\n    cwd: '.\/public\/coffee\/views\/*',\n    src: '**\/*.hbs',\n    dest: '.\/',\n    ext: '.js'\n  }\n},\n<\/code><\/pre>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    I’m just wondering if anyone has had experience using this plugin in a backbone project. Instead of having all my script template tags in a single index file, I wanted to house my templates in the same directory as my views that required them. So I was hoping i could use the node option to […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2851","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/2851","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=2851"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/2851\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=2851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=2851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=2851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}