0

私は backbone.js とハンドルバーが初めてで、テンプレートでデータをレンダリングするのに問題があります。

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) 関数を含めない場合は、{{ name }} がまだ含まれているフィード テンプレートにあるストレート アップ HTML としてページにレンダリングされます。ただし、含まれているとエラーが発生します

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

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

appLayout ビューの render 関数に渡される変数を調べると、 var が関数であり、 var が未定義でfeedあることがわかり、そのエラーがスローされます。templatecontext

私が間違っていることはありますか？ここで少なくとも 1 つ、おそらくそれ以上の問題があることはわかっています。

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

     });

})

参考までに、backbone/require/handlebars セットアップ用のシンプルなボイラープレートを作成しましたhttps://github.com/nec286/backbone-requirejs-handlebars

于 2012-09-13T20:21:28.407 に答える