0

I feel I'm missing a very basic point in backbone subview rendering (I've already read about it of course), here is my simple problem.

Here is the html:

<div id="activewindow> </div>

That's it. I render the activewindow view, no problem. When I click on some button it creates and render the modelView. Here is the html of the modalView:

<div id='modal'>
    <div class='modalwindow'>
        <div class="modalHeader">
            <div class='closeModal' data-translate-id="closeModal"></div>
            <img class='closeModal' src="./resources/images/close.png"> </img>
        </div>
    </div>
</div>

The problem is that when I click the close button in the modalView it doesn't trigger the closeModal function. (no console.log neither remove). Below the modalView code.

define('modalView', [
    'backbone',
    'text!views/modalView/destinationTemplate.html'
    ], function(Backbone, DestinationTemplate) {

        var ModalView = Backbone.View.extend({

            el:'#modal',

            template: _.template(DestinationTemplate),

            events: {
                'mouseup .closeModal': 'closeModal'
            },

            initialize: function(data) {
                _.bindAll(this,'render','closeModal');
                console.log(data.destinationId);
                this.render();
            },

            render: function() {
                $('#activewindow').append(this.template());
            },

            closeModal: function() {
                console.log("REMOVE!!");
                this.remove();
            }


        });

        return ModalView;

});

Thanks for your help.

François Richard
  • 6,817
  • 10
  • 43
  • 78
  • 1
    Your code looks weird. When you use `el`, Backbone will bind/delegate events to that _exiting_ element. I assume that the element with the ID `modal` already exists when you issue `new ModalView();`.So far it should work. What confuses me is the fact that. in `render()`, you append a template to another element. May I ask where the `#modal` is located? Is maybe contained within/under `#activewindow`? Please add how and when you instantiate `ModalView`. How are `#activewindow` and `#modal` related to each other before that? Try removing `render()`: it should work as expected to isolate the prob – try-catch-finally Mar 24 '16 at 10:50
  • #modal is not located I would like to inject/create it when the view is instanciated – François Richard Mar 24 '16 at 11:50
  • @FrançoisRichard Then you should customize the `el` as `#modal`. Looks like you're making the same mistake as this http://stackoverflow.com/q/35485263/2333214. You're making two mistakes, and the above two posts handles them – T J Mar 24 '16 at 11:58

0 Answers0