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 を使用して、各要素 (これは人を表します)に赤色を適用するとします。このメソッド (例:) はPersonView$('li').css('color', 'red')内のどこかで呼び出す必要があるため、PeopleView 内でインスタンス化するときに、要素には既にそのスタイルが適用されています ( jQuery 経由)。

繰り返しになりますが、これが CSS ではなく jQuery を介して (特に子クラス内で呼び出されるメソッドである PersonView を使用して) 可能かどうかを知りたいと思っています。

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

デモについては、このフィドルを参照してくださいhttp://jsfiddle.net/nikoshr/64QWX/

于 2013-03-01T11:57:11.347 に答える