javascript - 骨干视图不会显示

Question

我很难弄清楚为什么我的 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 文档，其中包含一个 id 为“monster”的空 div。这似乎是正确的，但这是 Chrome 控制台告诉我的内容：

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

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

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

谢谢你的帮助。对于非菜鸟来说，这可能是一件容易的事……

Answer 1

要使用带有 id 怪物的现有 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()));
    }
});

Answer 2

只需将其放入$(document).ready(...); 并且您需要将元素声明为el: '#monster'，tagName id组合将不起作用。

Answer 3

不要忘记您需要将视图指向页面上的某个位置。

尝试类似：

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

wheremy-container是页面上已经存在的元素。