Question

这是我第一次使用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。

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

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

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

设置它

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

然后在DOM ready事件之后实例化您的类时评估

el。 http://jsfiddle.net/nikoshr/mNprr/1/

Backbone View不选择元素

1 个答案: