Search code examples
jquerymodel-view-controllerbackbone.jsmarionette

Hear for event outside Marionette ItemView

I have the following html -

<html>
    <body>
        <div id="one">
            <-- Marionette ItemView V1 rendered here -->
        </diV>

        <div id="two">
            <-- Mariontette ItemView V2 rendered here -->
        </div>
    </body>
</html>


How can I listen to mouseup event in #two within #one like so: 

var V1= Marionette.ItemView.extend({
    template: "#template_for_div#one",

    event: {
        "mouseup #two": "do_something",
        // Other events
    },

    // Other stuff
});
Solution

  • Better way to solve this problem is to create a dispatcher object that both objects have reference to. Trigger and listen to events on this object. (To clarify, this object is now a view, rather it is a backbone events object whose only job is to dispatch events.)

    The Backbone docs say this under the Backbone.Events section: http://backbonejs.org/#Events "For example, to make a handy event dispatcher that can coordinate events among different areas of your application: var dispatcher = _.clone(Backbone.Events)"