Galleria.io 和backbone.js CPU 使用率100%答案

【问题标题】：Galleria.io and backbone.js CPU usage 100%Galleria.io 和backbone.js CPU 使用率100%
【发布时间】：2012-06-17 03:25:11
【问题描述】：

我对图片库 Galleria.js 和主干有一个奇怪的问题。

此视图有时会被隐藏，然后使用不同的模型重新渲染。发生的情况是，在重新渲染 2 或 3 次后，浏览器的 CPU 使用率飙升至 100%。我确认Galleria是这个原因，因为我从视图中删除了它并且CPU是正常的。

我在想我可能需要在隐藏时破坏视图或其他什么？不完全确定如何处理。

App.HouseDetailView = Backbone.View.extend({
    el: '.house-details-area', 
    initialize: function() {
        this.template = _.template($('#house-details-template').html());
        App.Events.on('show_house', this.render, this);
        App.Events.on('show_main_view', this.hide, this);
    },
    events: {
        'click .btn-close': 'hide',
        'shown a[data-toggle="tab"][href=".detail-map"]' : 'show_map',
        'shown a[data-toggle="tab"][href=".detail-street-view"]' : 'show_street_view',
        'change .calculate-price': 'calculate_price',
    },
    render: function(model) {
          this.model = model;
          var html = this.template({model:model.toJSON()});
          $(this.el).html(html);
          Galleria.loadTheme('/static/js/libs/galleria.classic.min.js');
          Galleria.run('#galleria', {wait: true});
          $(this.el).show();
          return this;

    },
    hide: function() {
        $(this.el).hide();
        App.detailsRouter.navigate('/', true);
    },
    show_map: function() {
        // check if map already rendered
        if (this.$('.detail-map').html() === '') {
          var map = new App.DetailMapView({model:this.model});
          this.$('.detail-map').html(map.el);
          map.refresh();  
        }         
    },
    show_street_view: function() {
        if (this.$('.detail-street-view').html() === '') {
            var street_view = new App.DetailStreetView({model:this.model});
            this.$('.detail-street-view').append(street_view.el);
            street_view.render();
        }   
    },
    calculate_price: function (e) {
        var price_element = this.$('.price');
        var total_price = parseFloat(price_element.attr('data-total-price'));
        var people = parseFloat(price_element.attr('data-people'));
        // if selected is 1st option: Total price
        if (e.srcElement.selectedIndex === 0) {
            // show total price
            price_element.html('$' + total_price.toFixed(2));
        } else {
            // show per person price
            price_element.html('$' + (total_price/people).toFixed(2));
        }
    },
});

【问题讨论】：

你是否将选项传递给渲染方法。从这个this.model = model; 内部渲染方法的外观来看，在我看来你正在这样做view.render(model)。首选方法是new View({model:house});

标签： javascript backbone.js galleria

【解决方案1】：

我可以通过从视图的 render() 方法中删除 Galleria.loadTheme('/static/js/libs/galleria.classic.min.js'); 来解决此问题。

我只在应用初始化时加载一次 Galleria 主题。

【讨论】：