0

我是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]]);

如果我检查传递给 appLayout 视图渲染函数的变量feed，我会看到templatevar 是一个函数，并且contextvar 未定义，然后它会引发该错误。

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

4

1 回答 1

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

     });

})

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

于 2012-09-13T20:21:28.407 回答