Question

我有一个简单的对象层次结构（骨干），例如：

var PersonView = Backbone.View.extend({ //child class
    tagName: 'li',

    template: _.template( $("#personTemplate").html() ), // RETURNS A FUNCTION!!!

    render: function(){
        this.$el.html( this.template( this.model.toJSON() ) );
        return this;
    }
});

var PeopleView = Backbone.View.extend({    //container class
    tagName: 'ul',

    render: function(){

        this.collection.each( function( person ){
            var personVar = new PersonView( {model : person} );
            this.$el.append( personVar.render().el );
            }, this);

            return this;
    }
});

这只是一个例子。假设我想用jQuery为每个<li>元素（这代表一个人）应用红色。这个方法（例如：$('li').css('color', 'red')）必须在 PersonView 中的某处调用，所以当我在PeopleView中实例化它时，该元素已经具有该样式已应用（ 通过jQuery ）。

同样，我很想知道这是否可以通过jQuery（特别是在子类内部调用的方法 - PersonView），而不是通过CSS。

Answer 1

骨干视图始终引用其关联的DOM元素View.el：

所有视图都始终具有DOM元素（ el 属性），无论它们是否已插入到页面中。以这种方式，可以随时呈现视图[...]

通过扩展，View.$el总是指向正确的jQuery元素，因此您可以在PersonView渲染中应用任何jQuery函数：

var PersonView = Backbone.View.extend({
    tagName: 'li',

    template: _.template( $("#personTemplate").html() ),

    render: function(){
        this.$el.html( this.template( this.model.toJSON() ) );
        this.$el.css('color', 'red');
        return this;
    }
});

请参阅此小提琴以获取演示http://jsfiddle.net/nikoshr/64QWX/

在Backbone Js视图的render（）方法中应用jQuery样式

1 个答案: