Question

您好我有以下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样式显示属性的变化。

有可能吗？

Answer 1

您是否可以更改代码以触发正在隐藏/显示的元素上的事件？这与设置显示非隐藏/隐藏时添加两行一样多。正在更改其显示状态的元素上的$(el).trigger('display:changed')。然后从Backbone.View只在元素disapearingElement.on('display:changed', doSomething)

上侦听这个自定义事件

任何其他解决方案将是超级麻烦并在浏览器上持续加载。你必须创建一个helper方法，它将使用setInterval / setTimeout进行轮询，它会一直检查元素的状态，并在它发生变化时触发一个回调/自定义事件 - 这是跨浏览器实现它的唯一方法。 p>

但老实说......不要留下凌乱的代码 - 如果它对你没问题，那么好 - 但想想那些将在你离开时使用这段代码的人：P

有没有办法听取Html元素样式的变化 - Backbone.JS

1 个答案: