javascript - Backbone View 未选择元素

Question

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

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 中。

渲染 View 时，控制台输出以下内容。

WOW
doing it
0
1

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

知道我做错了什么吗？

编辑:在 JS 调试器中，我可以看到 View 未定义 this.el。

Answer 1

您的代码可能等同于此:

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 就绪事件 之前声明的。

您可以使用 $('#node-parameters') 在扩展时间设置 el。 $ 是一个立即执行的函数，但是，这就是您得到未定义元素的原因，#node-parameters 此时不存在。

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

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

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