Question

我是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电话，拨打电话获取我的主模板，然后拨打电话获取Feed模板HTML。如果我不包含该渲染（模板，上下文）功能，那么它会在页面上呈现为我在Feed模板中的直接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是未定义的，然后它抛出了那个错误。

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

Answer 1

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

E.g。使用预编译的模板

// 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

backbone.js，handlebars错误：this._input.match不是函数

1 个答案: