0

次の HTML テンプレートがあります。

    <li id="imovel" style="<%=  display %>">
        <div class="thumbnail">                      
          <a href="#">
            <img src="http://placehold.it/90x60"></img>
            <%= textvar %>
          </a>
        </div>                                    
    </li>

表示はdisplay: none物display: blockによっては1/2です。

このビューが欲しいです：

var imovelView = Backbone.View.extend({
    
    el: $('#imovel')
    
    ,template:  _.template( $("#listing_template").html())
    
    ,events: {
        "change:display #imovel" : "activate"
    }
    
    ,initialize: function(){
        this.on('change:display', this.toggle, this);
        this.collection.bind('add', this.render, this);
    }
    
    ,activate: function(item){
        alert("change display");
    }

    ,render: function(item){
        var showPerPage = $('#show_per_page').val();
        var totalEntries = this.collection.length;

        var pageMax = Math.ceil( showPerPage/totalEntries );
        var displayValue = "display: none;";

        if(totalEntries <= showPerPage){
            displayValue = "display: block;";
        }

        var variables = { textvar: item.get("Lat"), display: displayValue };        
        var template = this.template( variables );

        $('#max_page').val(pageMax);
        $('#content').append( template );
        resizeViewport();
    }
    
});

表示するときchange:displayは、el スタイルの表示プロパティの変更をリッスンすることを意味します。

それは可能ですか？

4

1 に答える 1

2

非表示/表示されている要素でイベントをトリガーするようにコードを変更できますか? これは、非表示/非表示を設定した場合に 2 行追加するのと同じです。$(el).trigger('display:changed')表示状態を変更している要素で。そして、Backbone.View から、要素でこのカスタム イベントをリッスンするだけです。disapearingElement.on('display:changed', doSomething)

他のソリューションは非常に面倒で、ブラウザーに一定の負荷がかかります。要素の状態を常にチェックし、変更時にコールバック/カスタム イベントをトリガーする setInterval/setTimeout でポーリングを使用するヘルパー メソッドを作成する必要があります。これがクロス ブラウザーを実装する唯一の方法です。

しかし、正直なところ... 乱雑なコードを残さないでください-それがあなたにとって問題ない場合は、わかりました-しかし、あなたがいなくなったときにこのコードで作業する人々のことを考えてください:P

于 2012-02-05T12:55:18.267 に答える