Question

我正在尝试学习Backbone，但我对Handlebars有一个问题。

我想构建一个模块化应用程序，其中有视图和模板的单独文件。

这是我的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;
});

现在我应该在控制台上获得'渲染'，但我没有得到它，并且'templates / home.html'的模板没有渲染。

我在控制台或DOM上也没有出现任何错误。

Answer 1

我认为你需要在调用render之前实例化视图 -

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

许多Backbone代码示例都没有使用大写字母来表示应该实例化的内容（即使用'new'调用），反之亦然。

Backbone Boilerplate + Handlebars视图不起作用

1 个答案: