jquery - 在 Backbone Js View 的 render() 方法中应用 jQuery 样式

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;
    }
});

这只是一个例子。假设我想为每个 <li> 应用红色。元素(这代表一个人)与 jQuery。此方法(例如: $('li').css('color', 'red') )必须在 PersonView 内部的某个位置调用，因此当我在 PeopleView 内部实例化它时，该元素已经应用了该样式( 通过 jQuery)。

同样，我很想知道这是否可以通过 jQuery(尤其是在子类中调用的方法 - PersonView)而不是通过 CSS 实现。

Answer 1

主干 View 始终具有对其关联 DOM 元素的引用，View.el :

All views have a DOM element at all times (the el property), whether they've already been inserted into the page or not. In this fashion, views can be rendered at any time[...]

通过扩展，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;
    }
});

请参阅此 Fiddle 进行演示 http://jsfiddle.net/nikoshr/64QWX/