Mason unbinds jQuery events on filler elements about mason

[DrewDahlman]

Ah this is due to the fillers being removed and then added again based on new layout. Might want to rebind on callback complete.

Sent from my iPhone

On Dec 24, 2014, at 7:33 PM, Seyi [email protected] wrote:

@DrewDahlman Hi, I have a Mason grid and I have noticed that the filler elements have their events unbound, in this case click events, once they are rendered in the DOM. The promoted elements are fine, I assume they are untouched by the implementation that manipulates the filler elements. Any ideas why this is happening?

—
Reply to this email directly or view it on GitHub.

[theseyi]

Hi @DrewDahlman, thanks for your response. Is it possible to configure Mason to re-delegate events once it's added items in the filler_blocks array, or when the unbinding happens. I'm using Mason with Backbone/Marionette, so I need to maintain reference between the filler element and it's corresponding view. Thanks.

[DrewDahlman]

Hmm there is the complete callback that will fire when mason completes layout, you could maybe do it there.

Mind posting a bit of code for when you're creating the views based off of the filler blocks? I want to make sure I am understanding correctly

Sent from my iPhone

On Dec 26, 2014, at 10:15 AM, Seyi [email protected] wrote:

Hi @DrewDahlman, thanks for your response. Is it possible to configure Mason to re-delegate events once it's added items in the filler_blocks array, or when the unbinding happens. I'm using Mason with Backbone/Marionette, so I need to maintain reference between the filler element and it's corresponding view. Thanks.

—
Reply to this email directly or view it on GitHub.

[theseyi]

Thanks @DrewDahlman , I did try using the complete callback, however, since the reference between the view and it's DOM element has been severed, I can't quickly just rebind the view.I tried this in the callback:

        onRender: function () {
            $('.posts', this.el).mason({
                itemSelector:  '.prime-tile',
                ratio:         1,
                sizes:         [
                    [1, 1]
                ],
                columns:       [
                    [0, 1680, 8]
                ],
                promoted:      [
                    [1, 2, 'recommended-tall'],
                    [2, 2, 'recommended-promoted'],
                    [2, 1, 'recommended-wide']
                ],
                filler:        {
                    itemSelector:   '.filler-tile',
                    'filler_class': 'recommended-filler'
                },
                gutter:        0,
                layout:        'fixed',
                randomFillers: true
            }, function () {
                this.children.each(function (view) {
                    view.$el.click(_.bind(view.onTileClicked, view));
                });
                this.revealTiles();
            }.bind(this));
        }, ...

If you are familiar with Backbone.Marionette, I'm using a CompositeView to create the grid. In essence, the blocks are created by looping over some data models and creating a block view, then appending that to the main container. Each view has an $el property that is a reference to the view's DOM element, which binds that view to the specific DOM element. The CompositeView has an appendHtml method I can override to append my blocks into specific containers, like so:

        appendHtml: function (collectionView, itemView, index) {
            if (itemView.model.get('displayType') === 'filler') {
                itemView.$el.addClass('filler-tile');
                collectionView.$('div.filler-bucket').append(itemView.el);
            } else {
                switch (itemView.model.get('displayType')) {
                    case 'promoted':
                        itemView.$el.addClass('prime-tile recommended-promoted');
                        break;
                    case 'twice-wide':
                        itemView.$el.addClass('prime-tile recommended-wide');
                        break;
                    case 'twice-tall':
                        itemView.$el.addClass('prime-tile recommended-tall');
                        break;
                    default :
                        itemView.$el.addClass('prime-tile');
                        break;
                }
                collectionView.$('div.posts').append(itemView.el);
            }
        },

[theseyi]

Fixed in pull request: #39