Capture event that creates all views on adding models to the existing collection backbone marionette

Question

I have implemented the following functionality:

define([
    'jquery',
    'underscore',
    'backbone',
    'marionette',
    'app',
    'views/y/x/FlightScheduleLayoutView',
    'collections/y/x/ScheduleCollection'
], function($, _, Backbone, Marionette, App, FlightScheduleLayout, ScheduleCollection) {
    var FlightScheduleListView = Backbone.Marionette.CollectionView.extend({
        collection: ScheduleCollection,
        itemView: FlightScheduleLayout,
        doSort: function(sortCode, sortDirection) {
            this.collection.setSortField(sortCode, sortDirection);
            this.collection.sort();
            this.collection.trigger('reset');
        },
        onAfterItemAdded: function(itemView) {
            if ($(itemView.el).hasClass("flight")) {
                var flight = $(itemView.el);
                var flightDetailsBtn = flight.find(".flight_details");
                var flightDetails = flight.find(".option_details");
                var count = parseInt(this.children.length);
                var flightDetailsId = "flight-details-" + count;
                flightDetailsBtn.attr("data-target", "#" + flightDetailsId);
                flightDetails.attr("id", flightDetailsId);
                flight.find("[data-toggle=tooltip]").tooltip();
            }
        }
    });
    return FlightScheduleListView;
});

Now there is a functionality somewhere in js that does the following:

this.flightScheduleListView = new FlightScheduleListView({ collection: schedules });

Add later in code this happens:

this.flightScheduleListView.collection.add(this.flightSchedules.models.slice(this.numberOfFlightSchedulesVisibleCurrently, this.numberOfFlightSchedulesVisibleCurrently + this.flightSchedulesPerPage));

Using OnAfterItemAdded works perfectly. But this is time consuming as it iterates over every view. Is there any render function that gets called when we add something to the collection of the view? I can't use OnRender because it's only called on View instantiation and not when adding to collection.

http://marionettejs.com/docs/v2.4.1/marionette.collectionview.html#onaddchild-callback — coding_idiot, Jul 21 '15 at 03:56
I have looked up the documentation, Couldnt find any, that could handle gets triggered when multiple childviews are appended. Because OnAfterItemAdded is getting called for each item. — Kasturi Chavan, Jul 21 '15 at 18:27

score 0 · Answer 1 · answered Jul 22 '15 at 02:37

0

onAddChild callback

This callback function allows you to know when a child / child view instance has been added to the collection view. It provides access to the view instance for the child that was added.

Marionette.CollectionView.extend({
  onAddChild: function(childView){
    // work with the childView instance, here
  }
});

References : http://marionettejs.com/docs/v2.4.1/marionette.collectionview.html#onaddchild-callback

answered Jul 22 '15 at 02:37

coding_idiot

13,526
10
65
116

This too is at child level. I was wondering if we have something to capture all children in one go. Not at each child level. But All children. – Kasturi Chavan Jul 23 '15 at 19:48
sorry, I didn't get. What do you mean by `child level` ? This comment negates your comment in the question. – coding_idiot Jul 24 '15 at 07:41
I just meant that , the solution you suggested captures each childview and then works on it. Is there a way to capture all childview in one function in one iteration? – Kasturi Chavan Jul 27 '15 at 18:09

Capture event that creates all views on adding models to the existing collection backbone marionette

1 Answers1