1

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

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。

4

1 回答 1

3

主干视图总是引用其关联的 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;
    }
});

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

于 2013-03-01T11:57:11.347 回答