有没有办法收听 Html 元素样式更改 - Backbone.JS

Question

I have the following HTML template:

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

The display is a display: none or display: block depending on some things.

I would like this view:

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

When I do change:display in display I mean Listen to changes in the el style display property.

Is it possible to do that ?

Answer 1

Can you alter the code to trigger event on the element that is being hidden/shown? This is as much as adding two lines when display nonde/hide is set. $(el).trigger('display:changed') on the element that is changing it's display state. And then from Backbone.View just listen for this custom event on the element disapearingElement.on('display:changed', doSomething)

Any other solution will be supper messy and put a constant load on the browser. You'd have to create helper method which would use polling with setInterval/setTimeout that would check the state of element all the time and trigger a callback/custom event when it changes - this is the only way to implement it cross browser.

But honestly... don't leave messy code - if it's fine for you, ok - but think about people who will be working with this code when you are gone :P