1

这是我第一次使用 Backbone 创建视图，但我无法呈现对文档中现有元素的更改。

var ParamsView = Backbone.View.extend({

    el: $('#node-parameters'),

    initialize: function() {
        console.log('WOW');
    },

    render: function() {
        console.log('doing it');
        console.log(this.$el.length);
        console.log($('#node-parameters').length);
        this.$el.append('<span>hello world!</span>');
        return this;
    }

});

    var v = new ParamsView();
    v->render();

该词hello world!没有出现在目标中div。

渲染视图时，控制台会输出以下内容。

WOW
doing it
0
1

所以我知道我的 jQuery 选择器$('#node-parameters')正在找到 1 个 DOM 元素，但视图没有使用它。

任何想法我做错了什么？

编辑：在 JS 调试器中，我可以看到this.el该视图未定义。

4

1 回答 1

2

您的代码可能等同于：

var ParamsView = Backbone.View.extend({
    el: $('#node-parameters'),

    initialize: function() {
        console.log('WOW');
    },

    render: function() {
        console.log('doing it');
        console.log(this.$el.length);
        console.log($('#node-parameters').length);
        this.$el.append('<span>hello world!</span>');
        return this;
    }
});

$(document).ready(function() {
    var v = new ParamsView();
    v.render();
});

http://jsfiddle.net/nikoshr/mNprr/

请注意，您的类是在DOM 就绪事件之前声明的。

您将 el 设置为延长时间$('#node-parameters')。$是一个立即执行的函数，但这就是为什么你得到一个未定义的元素，#node-parameters 在那个时候不存在。

通过使用 注入元素new ParamsView({el: '#node-parameters'})，您可以在 DOM 就绪事件之后设置一个有效的 el。你也可以通过

var ParamsView = Backbone.View.extend({
    el: '#node-parameters'
});

el然后在您实例化您的类时，在 DOM 就绪事件之后进行评估。http://jsfiddle.net/nikoshr/mNprr/1/

于 2013-04-12T16:50:08.643 回答