backbone events in modals about bootstrap-modal

[jschr]

Weird, not sure what could be causing this behaviour. Do you have a reproducible or url I can take a look at?

Thanks

[gdiazlo]

The same URL: taskspal.appspot.com

El 01/12/2012, a las 17:22, "Jordan Schroter" [email protected] escribió:

Weird, not sure what could be causing this behaviour. Do you have a reproducible or url I can take a look at?

Thanks

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

[jschr]

Can you point to where in the code the issue is happening?

[gdiazlo]

Task -> Add New -> Submit

Events are defined in app.js line 522, form button is defined in collection.task.templ line 43, backbone app is initialized in index.html line 97.

[jschr]

Still not sure what's going exactly. I can attach my own handlers to the button and modal manually with jQuery and it all works fine.

My best guess right now is that it has something to do with the modal being moved around in the DOM when opened. If you manually trigger a click on the button with $('#Add').click() and the addModal method gets called. Doing this after the modal is shown, it will not. Where is backbone attaching the events for the modal? If they're not attached to the modal itself, that is most likely the problem.

[gdiazlo]

I'm not sure how backbone attach the events. The app.js workflow is:

• create the backbone router
• create collection views
• render each view depending on the URL
  • execute the cached template using underscore. In these templates is the code for the modal.

Backbone is attached on each view to the div#content on which templates are rendered. And i guess this happens before the modal is in the DOM.

Seems this guy described the problem you're referring to, but i have already a wrapper div which is the #content div. (http://lostechies.com/derickbailey/2012/04/17/managing-a-modal-dialog-with-backbone-and-marionette/), so the events are there, not in the modal itself.

The modal-manager is in charge of handling the events in the modal, right? if this the case, the problem could be there.

[gdiazlo]

As a work around I manually added the event to the modal element, instead of to the container as you suggested, but i would love to be able to use the backbone event machinery.

[jschr]

The modalmanger is not so much in charge of handling the events as it just hooks into the modal's hide/show events. The modal itself is still responsible for it's internal events just as submitting. Bootstrap put's its events on the $(document) which is why the modal still closes no matter where the modal is moved.

The problem is happening because the events for the modal are being attached to #content and then the modal get's placed outside of it when it is shown. Is there anyway you can have the modal as it's own Backbone view so that the events get attached to div.modal instead? This is how I ended up structuring my Backbone application.

For example:

var SignupView = Backbone.View.extend({

        tagName: 'div',

        className: 'modal fade signup',

        events: {
            'click .submit': 'submit'
        };

        show: function(){
            var that = this,
                el = $(this.el);

            el.modal();

            ...
        },

        submit: function(e){
            ...
        }

    });

This will create the div.modal for you but if you want to use a template that contains the full html for it I think you can use the el key instead of the tagName and className key.

...
el: $('#NewObjectModal'),
...

Hope that helps

[gdiazlo]

I see, this would mean a bit of rethink and rewrite, but i think is worth it to use backbone event machinery and structure, instead of manually add events on other view render().

thanks a lot again :)

[mrchess]

I had this issue too. @jschr based on your Backbone structure above how do you use properties like "data-width"? Are you just appending them via JS in the render or initialize method?

[jschr]

Good question, admittedly it's been a little while since I used Backbone and was before I wrote this plugin but I think your options are:

1. Not use tagName, use el instead and define the attributes in the template or DOM node itself
2. As you said, use the init or render method to modify $(this.el).attr(...) or pass in the options with JS: $(this.el).modal({ width: 700 })

[jschr]

Will close this issue for now as it's more a Backbone how-to rather than an actual issue with modals.

[jschr]

Looks like you can set attributes on a Backbone View with the attirbutes key.

Also came across this stackoverflow post that may be helpful. Scroll down to "Dynamically set view attributes with model data"

[mrchess]

@jschr Sounds good. Worked well. For anyone stumbling across this in the future just do this for your Backbone view.

Backbone.View.extend({
    tagName: 'div',
    className: 'modal',
    attributes: {
        "data-width": "90%"
    }
    ...
});