CODEWITHSUNDEEP
backbone.jsjavascript-frameworkhandlebars.jsbackbone-views
danikoren
danikoren

Reputation: 4301

backbone.layoutmanager and handlebars template engine

I'm using the backbone.layoutmanager project: https://github.com/tbranyen/backbone.layoutmanager#readme

can some one please post a sample with handlebars template engine? containing the modified app.js file and an instance view?

i have followed the instructions and i'm a bit confused what should i do in the instance level and the global. i keep getting the "has no method 'match' err message on my template.

Thanks

Upvotes: 1

Views: 2512

Answers (1)

jmconrad
jmconrad

Reputation: 629

Your modified app.js will work with something like this:

define([
  "jquery",
  "underscore",
  "backbone",
  "handlebars",
  "plugins/backbone.layoutmanager"
],
function($, _, Backbone, Handlebars) {
  "use strict";

  var JST = window.JST = window.JST || {};

  Backbone.LayoutManager.configure({
    paths: {
      layout: "path/to/layouts/",
      template: "path/to/templates/"
    },

    fetch: function(path) {
      path = path + ".html";

      if(!JST[path]) {
        $.ajax({ url: "/" + path, async: false }).then(function(contents) {
          JST[path] = Handlebars.compile(contents);
        });
      }

      return JST[path];
    }

    // It is not necessary to override render() here.
  });

  var app = {
    // Define global resources here.
  };

  return _.extend(app, Backbone.Events);
});

An example of a view:

var SampleView = Backbone.View.extend({
  template: "path/to/sample/template",

  // Override this for fine grained control of the context used by the template.
  serialize: function() {
    return {
      property: 1,
      anotherProperty: 2
    };
  }

  // No need to override render() for simple templates.
});

And the template associated with the view:

<div>
  <h2>{{property}}</h2>
  <h2>{{anotherProperty}}</h2>
</div>

Upvotes: 5

Related Questions