javascript - Handlebars, loading external template files -

javascript - Handlebars, loading external template files -

my goal set handlebars templates in single folder, so:

templates/products.hbs templates/comments.hbs

i found snippet in few places via cursory google search, apparently load in handlebar templates in external files, makes much more sense putting bunch of templates in single index file.

(function gettemplateajax(path) { var source; var template; $.ajax({ url: path, //ex. js/templates/mytemplate.handlebars cache: true, success: function(data) { source = data; template = handlebars.compile(source); $('#target').html(template); } }); })()

the problem is, don't understand function or how utilize it. why whole function wrapped in parentheses , made function call? e.g. (function x() { ... })() don't know doing.

and if i'm not mistaken, looks $('#target') hardcoded when shouldn't be. furthermore, isn't supposed set data variable somewhere variables referenced in template work?? seems right function should be:

function gettemplateajax(path, target, jsondata) { var source; var template; $.ajax({ url: path, //ex. js/templates/mytemplate.handlebars cache: true, success: function(data) { source = data; template = handlebars.compile(source); $(target).html(template(jsondata)); } }); }

side note: if point me improve template engine, 1 natively supports external template files, , improve organized handlebars, i'd eternally grateful.

another issue: can't name files mytemplate.hbs, because when ajax phone call happens, sees binary file , comes through binary. suppose issue of setting server's mime type .hbs text/html or text/plain, issue grunt server , i'm not sure how alter mime types.

the code wrapped in iife (immediately invoked function expression), means function executed immediately. that's next means:

(function x() { console.log('hello'); })();

you can do:

(function() { console.log('hello'); }());

iifes commonly used create "private" scope bit of code plays nice (doesn't conflict) else.

sec function provided makes more sense , perhaps first 1 must have been example.

handlebars allows precompile templates don't have compile them @ run-time. way don't have create http requests load template(s).

for illustration if have next project construction - (note models, collections, , views within main.js illustration , .js files in root directory):

├── gruntfile.js ├── handlebars-v2.0.0.js ├── index.html ├── main.js ├── package.json └── templates └── todo.handlebars

todo.handlebars looks - html handlebars syntax:

<h3>{{title}}</h3> <p>created by: {{author}}</p>

precompile template next in command line (you have install handlebars precompile script first with: npm install -g handlebars):

> handlebars templates/todo.handlebars -f todo.tpl.js

now project construction looks so:

├── gruntfile.js ├── handlebars-v2.0.0.js ├── index.html ├── main.js ├── package.json ├── templates │   └── todo.handlebars └── todo.tpl.js

you'll see todo.tpl.js file has been added root directory. have named different if wanted long extension .js because file contains valid javascript code. have specified different directory output to. remember todo.tpl.js file actual template backbone view use. write html in todo.handlebars , compile todo.tpl.js.

have todo.tpl.js file can utilize grunt maybe concat js template files all_templates.js file or can reference each file straight in html so:

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="http://documentcloud.github.io/underscore/underscore-min.js"></script> <script src="http://documentcloud.github.io/backbone/backbone-min.js"></script> <script src="handlebars-v2.0.0.js"></script> <script src="todo.tpl.js"></script> <!-- template todo item --> <script src="main.js"></script>

in backbone view, in case lives within main.js file, template so:

var todoview = backbone.view.extend({ tagname: 'li', classname: 'todo-item', events: { }, // can grab template function name chose when // precompiled from: `handlebars.templates` template: handlebars.templates.todo, initialize: function(options) { this.listento(this.model, 'change', this.render); }, render: function() { this.$el.html(this.template( this.model.tojson() )); homecoming this; } });

, you're done! more info here:

http://handlebarsjs.com/precompilation.html https://www.npmjs.org/package/handlebars http://code.tutsplus.com/tutorials/introduction-to-handlebars--net-27761 (read talks precompiling)

javascript handlebars.js template-engine