骨干视图不会显示

我在查找为什么我的Backbone视图没有在浏览器中显示时遇到了一些麻烦。我正在运行一些Backbone教程，我只是试图修改一些代码来制作一个基本的RPG游戏，但是我看起来应该可以运行，所以我很难过。这里的代码：骨干视图不会显示

//MODEL 
var Monster = Backbone.Model.extend({ 
    defaults: { 
     name: '', 
     health: '', 
     defense: '', 
     attack: '', 
     damage: '' 
    } 
}); 

var goblin = new Monster({name: 'Gobby', health: 10, defense: 10, 
    attack: 5, damage: 4}); 

//VIEW 

var MonsterView = Backbone.View.extend({ 
    tagName: 'div', 
    id: 'monster', 
    template: _.template('<table>' + 
     '<th><%= name %></th>' + 
     '<tr><td>Health</td> <td><%= health %></td>' + 
     '<td>Defense</td><td><%= defense %></td></tr>' + 
     '<tr><td>Attack</td><td><%= attack %></td>' + 
     '<td>Damage</td><td><%= damage %></td><tr>' + 
     '</table>'), 
    render: function(){ 
     this.$el.html(this.template(this.model.toJSON())); 
    } 
}); 

var monsterView = new MonsterView({model: goblin}); 
monsterView.render();

去与此，我只是一个基本的html文档与空白的div与'怪兽'的ID。这似乎是正确的，但在这里就是在Chrome控制台告诉我：

monsterView - >报：＃DIV怪物，型号：孩子（已全部正确的属性）

如果我做monsterView.render（）在控制台中，它在控制台中打印未定义。但是，如果我进入后续到控制台或将其包含在我的app.js文件，视图看起来应该：

$('div').append(monsterView.template(monsterView.model.toJSON()));

感谢您的帮助。它可能是一个简单的一个非小白...

来源

2013-09-21 EmptyArsenal

要使用现有的div id为怪物：

var MonsterView = Backbone.View.extend({ 
    el: '#monster', 
    template: _.template('<table>' + 
     '<th><%= name %></th>' + 
     '<tr><td>Health</td> <td><%= health %></td>' + 
     '<td>Defense</td><td><%= defense %></td></tr>' + 
     '<tr><td>Attack</td><td><%= attack %></td>' + 
     '<td>Damage</td><td><%= damage %></td><tr>' + 
     '</table>'), 
    render: function(){ 
     this.$el.html(this.template(this.model.toJSON())); 
    } 
});

来源

2013-09-21 18:13:41 nilgun

这样做。谢谢您的帮助！ – EmptyArsenal

-1

不要忘了，你需要指向你的视图来渲染你的网页上的某个地方。

尝试类似：

var monsterView = new MonsterView({ 
    model: goblin, 
    el: $('.my-container') 
}.render());

其中my-container是已经存在于您页面上的元素。

来源

2013-09-21 18:10:26 garethdn

只是把它变成$(document).ready(...); 你还需要声明元素为el: '#monster'，tagNameid组合将无法正常工作。

来源

2013-09-21 18:20:10

骨干视图不会显示

回答

相关问题