Backbone.js和Handlebars - 使用grunt-contrib-handlebars

时间:2013-02-23 10:39:35

标签: backbone.js handlebars.js gruntjs

我只是想知道是否有人在骨干项目中使用此插件的经验。

我没有将所有脚本模板标签放在一个索引文件中,而是希望将模板放在与我需要它们的视图相同的目录中。

所以我希望我可以使用node选项来要求本地模板并渲染它,然后附加到我的索引文件上的#id(我将整理laster)。

所以基本上我把我的把手模板(template.hbs)和它编译的js(template.js)放在我的骨干视图index.coffee上。

public
   |_ coffee
      |_views
        |_card
           |_list
              index.coffee
              template.hbs
              template.js

作为参考,我的grunt文件如下所示:

handlebars: {
      compile: {
        options: {
          namespace: 'MyApp.Templates',
          node: true
        },
        files: {
          "public/coffee/views/card/list/template.js": "public/coffee/views/card/list/template.hbs"
        }
      }
    },

在我的骨干视图(index.coffee)中我希望像这样需要把手模板:

class CardList extends Backbone.View
    template: require('./template')


    … 
    do some other shiz
    …


render: =>
    template = Handlebars.compile($(this.template).html())
    html = template
        model: this.model
    $(this.el).html(html)

渲染它会在检查器中吐出这个错误:

Uncaught [object Object]

> template = handlebars.compile($(this.template).html());

我显然不知道自己在做什么,所以我希望有人可以说明我如何正确使用这个插件。

我正在使用grunt-contrib-handlebars v0.3.5

感谢任何帮助。

由于

2 个答案:

答案 0 :(得分:3)

您可以通过building the files object dynamically实现这一目标。

也许是这样的,虽然我不确定cwd是否支持通配模式。我也不确定dest是否与cwd相关。如果情况并非如此,这将不起作用,但值得一试。

handlebars: {
  dist: {
    options: {
      namespace: 'MyApp.Templates',
      node: true
    },
    // Glob for a directory of files, builds the files object, then map each
    // one to a new destination file.
    expand: true,
    cwd: './public/coffee/views/*',
    src: '**/*.hbs',
    dest: './',
    ext: '.js'
  }
},

答案 1 :(得分:2)

查看您所包含的template.js文件。 grunt-comtrib-handlbars应该已经将它预编译为Javascript函数,因此不再需要调用Handlebars.compile。您可以删除该模板= Handlebars.compile行。