每次提取不成功后，木偶放入新的ItemView中 [英] Marionette drop in new ItemView after every fetch not working

问题描述

我正在使用一个应用程序，该应用程序在每个collection.fetch之后都需要向DOM中投放随机广告.但是，每次获取收藏集并放入广告时，DOM似乎都在重设自身，而不仅仅是将新项目添加到整个收藏集容器中.

I am working with an app that after every collection.fetch, I need to drop in a random ad into the DOM. But, every time the collection fetches, and the ad is dropped in, it appears that the DOM is resetting itself instead of just appending new items to the overall collection container.

这是广告的ItemView:

Here is the ItemView for the ad:

define(["marionette", "lodash", "text!ads/template.html", "eventer"],
function(Marionette, _, templateHTML, eventer) {
    'use strict';

    var AdsView = Marionette.ItemView.extend({
        template: _.template(templateHTML),

        ui: {
            ad: '.ad'
        },

        initialize: function() {
            this.listenTo(eventer, 'generate:new:ad', this.generateNewAd, this);
        },

        onShow: function() {
            // Set add image onShow
            this.ui.ad.prop('src', '/ad/' + this.randomNumber());
        },

        generateNewAd: function(childView) {
            var newAd = this.ui.ad.clone(),
                element = childView.$el,
                elementId = childView.model.get("id");

            newAd.prop('src', '/ad/' + this.randomNumber());

            $("#" + elementId).after(newAd);
        },

        randomNumber: function() {
            return Math.floor(Math.random()*1000);
        },

        setUpAd: function() {
            this.ui.ad.prop('src', '/ad/' + this.randomNumber());
        }
    });

    return AdsView;
});

保存产品的CompositeView(收集完成sync后，我正在呼唤新广告):

CompositeView that holds the Products (I'm calling for a new ad after the collection is done syncing):

define(["marionette", "lodash", "text!fonts/products/template.html",
'fonts/products/item-view', 'fonts/products/model', 'eventer'],
function(Marionette, _, templateHTML, ProductItemView, ProductsModel, eventer) {
    'use strict';

    var ProductsView = Marionette.CompositeView.extend({

        template: _.template(templateHTML),

        childView: ProductItemView,

        childViewContainer: '.items',

        productsLimit: 150,

        initialize: function() {
            this.listenTo(eventer, 'sort:products', this.sortCollection, this);
            this.listenTo(this.collection, 'sync', this.setupSync, this);
        },

        sortCollection: function(field) {
            this.collection.sortByKey(field);
        },

        setupSync: function() {
            this.setupWindowScrollListener();
            this.adGeneration();
        },

        adGeneration: function() {
            var child = this.children.last();
            eventer.trigger('generate:new:ad', child);
        },

        productsEnd: function() {
            eventer.trigger('products:end');
        },

        setupWindowScrollListener: function() {
            var $window = $(window),
                $document = $(document),
                that = this,
                collectionSize = that.collection.length;

            if(collectionSize <= that.productsLimit) {
                $window.on('scroll', _.throttle(function() {
                    var scrollTop = $window.scrollTop(),
                        wHeight = $window.height(),
                        dHeight = $document.height(),
                        margin = 200;

                    if(scrollTop + wHeight > dHeight - margin) {
                        eventer.trigger('fetch:more:products');
                        $window.off('scroll');
                    }
                }, 500));
            } else {
                that.productsEnd();
            }
        },
    });

    return ProductsView;
});

推荐答案

来自您的上一个问题我注意到您将{ reorderOnSort: false }传递给您的ProductsView.这将导致您的CompositeView到重新- render发生排序事件.由于'sort' Collection.set()触发了事件 ，则必须通过{ reorderOnSort: true }以确保在fetch→set→sort之后不会重新渲染CompositeView.

From your previous question I noticed that you're passing { reorderOnSort: false } to your ProductsView. This will cause your CompositeView to re-render on a sort event. Since a 'sort' event is triggered by Collection.set(), you'll have to pass { reorderOnSort: true } to ensure that your CompositeView is not re-rendered after a fetch → set → sort.

注意:如果您的CompositeView定义了filter方法，并且在获取新模型时为子级添加了filter，则CompositeView将

Note: If your CompositeView defines a filter method and the children are filter'ed when new models are fetched, the CompositeView will re-render.

这篇关于每次提取不成功后，木偶放入新的ItemView中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！