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 - ＆gt; el：div＃monster，model：child（具有所有正确的属性）

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

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

Answer 2

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

Answer 3

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

尝试类似：

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

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

骨干视图将无法显示

3 个答案: