主干布局管理器和车把模板引擎答案

【问题标题】：backbone.layoutmanager and handlebars template engine主干布局管理器和车把模板引擎
【发布时间】：2012-07-08 15:49:43
【问题描述】：

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

有人可以发布一个带有车把模板引擎的示例吗？包含修改后的 app.js 文件和实例视图？

我已按照说明进行操作，但我有点困惑我应该在实例级别和全局范围内做什么。我不断收到“我的模板上没有方法'匹配'错误消息。

谢谢

【问题讨论】：

把代码贴出来看看，可能对你有帮助

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

【解决方案1】：

您修改后的 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>

【讨论】：