javascript - 主干 View 不会显示

Question

我在弄清楚为什么我的 Backbone View 没有显示在浏览器中时遇到了一些麻烦。我正在阅读一些 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 文档，其中包含一个 ID 为“monster”的空 div。这似乎是正确的，但 Chrome 控制台告诉我的是:

monsterView -> el: div#monster, model: child(具有所有正确的属性)

如果我在控制台中执行 monsterView.render() ，它会在控制台中打印 undefined 。但是，如果我在控制台中输入以下内容或将其包含在我的 app.js 文件中，则 View 看起来应该是这样的:

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

感谢您的帮助。对于非菜鸟来说这可能是一件容易的事......

Answer 1

要使用带有 id monster 的现有 div:

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()));
    }
});