无法将新元素附加到Backbone.js中的View.el

时间:2013-06-01 10:39:04

标签: javascript backbone.js

我正在学习骨干,面临以下问题。 我想将新元素追加到View的this.el元素。但它不会发生。 这是我的代码:

var MyData = Backbone.Model.extend({
    initialize: function() {
        this.bind('error', function(model, error) {
            console.log('error:' + error);
        });
    },
    defaults: {
        name: "Jo",
        age: 18,
        skill: 0
    },
    validate: function(attributes) {
        if (attributes.name == "Jonh")
            return false;
        return true;
    }
});

var MyView1 = Backbone.View.extend({
    initialize: function() {
        this.$el.empty();
    },
    el: '#middle',
    events: {
        "click": "render"
    },
    render: function() {
        this.$el.append(this.model.get('name'));    
    }
});

var myData = new MyData();
var myView1 = new MyView1( {model: myData} );

在html文件中有一个div元素定义如下:

<div id="middle"></div>

代码正常运行,但我没有看到任何附加元素。 我也尝试过像这样追加:

this.$el.append($("<p>").append(this.model.get('name')));   

2 个答案:

答案 0 :(得分:5)

由于您的javascript脚本在加载页面之前加载,因此Backbone View无法看到#middle div,因此您必须在加载页面后初始化视图:

$(document).ready(function() {
    // load your views
});

答案 1 :(得分:1)

我刚刚在我的IDE中加载它并且它工作正常。您的控制台没有显示任何错误?