主干.js，车把错误：this._input.match 不是函数答案

【问题标题】：backbone.js, handlebars error : this._input.match is not a function主干.js，车把错误：this._input.match 不是函数
【发布时间】：2012-09-13 16:01:28
【问题描述】：

我不熟悉backbone.js 和handlebars，在获取模板以呈现数据时遇到问题。

这是我来自 tagfeed.js 模块的集合和模型数据：

// Create a new module.
  var Tagfeed = app.module();

  // Default model.
  Tagfeed.Model = Backbone.Model.extend({
    defaults : {
        name : '',
        image : ''
    }
  });

  // Default collection.
  Tagfeed.Collection = Backbone.Collection.extend({
    model : Tagfeed.Model,
    url : Api_get('api/call')
  });

  Tagfeed.TagView = Backbone.LayoutView.extend({
    template: "tagfeed/feed",
    initialize: function() {
        this.model.bind("change", this.render, this);
    },
    render: function(template, context) {
                return Handlebars.compile(template)(context);
    }
  });

然后在我的路由器中我有：

define([
  // Application.
  "app",

  // Attach some modules
  "modules/tagfeed"
],

function(app, Tagfeed) {

  // Defining the application router, you can attach sub routers here.
  var Router = Backbone.Router.extend({

    routes: {
      "index.html": "index"
    },

    index: function() {
        var collection = new Tagfeed.Collection();

        app.useLayout('main', {
            views: {
                ".feed": new Tagfeed.TagView({
                    collection: collection,
                    model: Tagfeed.Model,
                    render: function(template, context) {
                        return Handlebars.compile(template)(context);
                    }
                })
        }
  });
    }
  });

  return Router;

});

这成功调用 api，调用获取我的主模板，并调用获取提要模板 HTML。如果我不包含该 render(template, context) 函数，那么它将在页面上呈现为我在提要模板中的直接 HTML，其中仍然包含 {{ name }}。但是，当它包含在内时，我得到了错误

TypeError: this._input.match is not a function
[Break On This Error]   

match = this._input.match(this.rules[rules[i]]);

如果我检查传递给 feed 的 appLayout 视图渲染函数的变量，我发现 template var 是一个函数，而 context var 是未定义的，那么它会引发该错误。

任何想法我做错了什么？我知道我这里至少有一个问题，可能还有更多。

【问题讨论】：

标签： javascript backbone.js handlebars.js

【解决方案1】：

由于您使用的是 requirejs，因此您可以使用文本模块来外部化您的模板，或者更好地预编译它们并将它们包含在您的视图中。查看http://berzniz.com/post/24743062344/handling-handlebars-js-like-a-pro

例如使用预编译模板

// router.js
define(['views/tag_feed', 'templates/feed'], function(TagFeedView) {

    var AppRouter = Backbone.Router.extend({

        // ...

    });

})

// tag_feed.js
define(['collections/tag_feed'], function() {

    return Backbone.View.extend({

        // ...

        render: function() {
            this.$el.html(
                Handlebars.templates.feed({
                    name: '...'
                })
            );
        }   

     });

})

作为参考，我为骨干/要求/车把设置创建了简单的样板文件https://github.com/nec286/backbone-requirejs-handlebars

【讨论】：

样板示例的链接是 404 :(