0

バックボーンを学ぼうとしていますが、ハンドルバーに問題があります。

ビューとテンプレート用に別々のファイルがあるモジュラーアプリを作成したいと思います。

これが私のapp.jsです：

define([
  // Application.
  "app",
  "views/home",
],
function(app, homeView){
    var Router = Backbone.Router.extend({
routes: {
  "": "index",
  "home": "home"
},

index: function() {
    console.log('hello');
},
home: function() {
    console.log('home');
    homeView.render();
}
});
return Router;
});

この時点で、コンソールに「ホーム」が表示されます。

これがviews/home.jsです

define([
  'app',
  'text!templates/home.html'
], function(app, homeTxt) {
    var homeView = Backbone.View.extend({
    el: $('#main'),
        render: function(){
           console.log('render');
           var data  = { property : "1" };

           this.template = Handlebars.compile(homeTxt);

           this.el.append( this.template() );
        }
     });

   return new homeView;
});

これで、コンソールで「render」を取得する必要がありますが、取得できず、「templates/home.html」のテンプレートがレンダリングされません。

コンソールでもDOMでもエラーは発生しません。

4

1 に答える 1

1

render を呼び出す前にビューをインスタンス化する必要があると思います -

home: function() {
    var viewInstance = new homeView();
    console.log('home');
    viewInstance.render();
}

多くのバックボーン コード サンプルは、インスタンス化する必要があるもの (つまり、'new' で呼び出される) を示すために大文字を使用せず、その逆も同様であるため、この混乱を助長しません。

于 2012-10-13T13:23:49.710 に答える