Possible Bug in CollectionLayout about famous-flex

Here is my code:

function _createCollectionView() {
        this.scrollView = new FlexScrollView({
                layout: CollectionLayout,
                flow: true,
                flowOptions: {
                    spring: {
                        dampingRatio: 0.8,
                        period: 1000
                    }
                },
                autoPipeEvents: true,
                debug: false,
                mouseMove: true,
                useContainer: true,
                layoutOptions: {
                    itemSize: [250, 150],    // item has width and height 
                    margins: [10, 5, 10, 5], // outer margins
                    spacing: [10, 10]        // spacing between items
                },
                dataSource: _getDogSurfaces.call(this)
            });
        return this.scrollView;
    }

If I resize the the browser and reload the page only the visible surfaces seem to get the events attached.
Just for illustration a screenshot

There are 24 surfaces in the CollectionView and in the above screenshot only the 16 visible surfaces have the click events attached for edit and delete in the upper right corner of a surface.

Any ideas what I'm missing?

[IjzerenHein]

Alright thanks for that info.

I think the problem is related to the 'autoPipeEvents' option. You could try not using that, and instead just piping the events from the views to the Scrollview yourself. I'll hopefully have some time this weekend to have a closer look at it.

And, nice screenshot btw :)

cheers, Hein

Thanks Hein, wouldn't be possible without your excellent library. It's just too sad that Famous Industries has take famo.us into something private. My hope is that SamsaraJS can be used to replace famous, I don't see any other library that could be a candidate.

Coming back to our problem: Unfortunately, piping each surface directly to the scrollView did result in the same issue. There must be something else causing this behavior.

It crossed my mind that the issue could be caused by the template that populates the content for each surface, because I attach the event handlers via jQuery. So I have tried to add the click event on a mouseover event, because all surface are rendered at this time.

function _addClickEventListeners() {
        app.wait(500).then(function() {
            // add click events to edit and delete buttons to all dog panels
            _.each(this.myDogs, function(d, i) {
                $('#edit' + i).mouseenter(function() {
                    console.log('#edit' + i + ' loaded' )
                    $('#edit' + i).on('click', _.debounce(function() {
                        require(['modules/updateDogDialog'], function(modal) {
                            var dialog = new modal(d);
                            this.modalController.show(new ModalView(dialog));
                        }.bind(this));
                    }.bind(this), 300));
                }.bind(this))

                $('#delete' + i).on('click', _.debounce(function() {
                    var deleteDog = confirm('Do you really want to remove this dog?');
                    if ( deleteDog ) {
                        _removeDog.call(this, i);
                    }
                }.bind(this), 300));
                if ( i === this.myDogs.length - 1 ) {
                    this.scrollView.ensureVisible(i);
                }
            }.bind(this));
        }.bind(this));
    }

But still, only the surface visible in browsers viewport get the event handlers attached. When I scroll down further they don't get attached.

[IjzerenHein]

Right, I see... Your jQuery code attaches its event handlers based on what is in the DOM at that time. ScrollView however, only adds the surfaces to the DOM which are visible and needed for scrolling. When scrolling, surfaces are dynamically added/removed to and from the DOM. That's why the surfaces which are not in the DOM at the time when _addClickEventListeners is called, don't have event handlers attached.
Personally I would not use this approach to attach event handlers, but instead use the famous event mechanisms instead.

Alternatively you could use the option layoutAll which causes all surfaces to be added to the DOM always, potentially at the cost of (scrolling) performance.