Есть ли способ прослушать изменения стиля элемента HTML - Backbone.JS - PullRequest
Новая
       33

Есть ли способ прослушать изменения стиля элемента HTML - Backbone.JS

0 голосов
/ 05 февраля 2012

Привет У меня есть следующий шаблон 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, в зависимости от некоторых вещей.

Мне бы хотелось, чтобы это мнение 

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.

Возможно ли это сделать?

1 Ответ

2 голосов
/ 05 февраля 2012

Можете ли вы изменить код для запуска события на скрытом / показанном элементе?Это равносильно добавлению двух строк, когда установлено отображение nonde / hide.$(el).trigger('display:changed') для элемента, который изменяет свое состояние отображения.А затем из Backbone.View просто прослушайте это пользовательское событие для элемента disapearingElement.on('display:changed', doSomething)

. Любое другое решение будет беспорядочным и будет постоянно загружать браузер.Вам нужно создать вспомогательный метод, который будет использовать опрос с помощью setInterval / setTimeout, который будет постоянно проверять состояние элемента и вызывать событие обратного вызова / пользовательское событие при его изменении - это единственный способ реализовать его в кросс-браузерном режиме.*

Но, честно говоря ... не оставляйте грязный код - если это хорошо для вас, хорошо - но подумайте о людях, которые будут работать с этим кодом, когда вы уйдете: P

...