主干视图没有选择元素

Backbone View not selecting element

本文关键字：有选择 元素 视图      更新时间：2023-09-26

这是我第一次使用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元素，但视图不使用它。

你知道我做错了什么吗?

EDIT:在JS调试器中，我可以看到this.el对于视图是未定义的。

您的代码可能相当于:

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'})，可以在DOM ready事件之后设置一个有效的el。你也可以通过

设置
var ParamsView = Backbone.View.extend({
    el: '#node-parameters'
});
然后，在DOM就绪事件之后，在实例化类时计算

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

相关文章：