backbone.layoutmanager和handlebars模板引擎

时间:2012-07-08 15:49:44

标签: backbone.js javascript-framework handlebars.js backbone-views

我正在使用backbone.layoutmanager项目: https://github.com/tbranyen/backbone.layoutmanager#readme

有人可以用车把模板引擎发布样品吗? 包含修改后的app.js文件和实例视图?

我按照说明操作,我有点困惑我应该在实例级别和全局中做什么。 我一直在模板上收到“没有方法'匹配错误信息。

由于

1 个答案:

答案 0 :(得分:5)

您修改后的app.js将使用以下内容:

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);
});

视图示例:

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.
});

与视图关联的模板:

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