Backbone.js marionette ItemView click event not working

1
votes

I have been able to get events to fire in my marionette controllers like so:

 ...snip...
 var Controller = {};

_.extend(Controller, Backbone.Events);

// private
var Layout = Marionette.Layout.extend({
    template: _.template(layout),

    regions: {
        inspectorStart: "#inspector_start",
        loginStart:     "#login_start",
        playerStart:    "#player_start"
    }


});

// private
var _initializeLayout = function() {
    console.log('initialize Start Layout...');
    Controller.layout = new Layout();
    Controller.layout.on('show', function() {       **// This works**
        Controller.trigger('startLayout:rendered'); **// This works**
    });
    vent.trigger('app:show', Controller.layout); **// This works**

};


// Listen for events ///////////////////////////////////////////
// controller attach a sub view
Controller.on("startLayout:rendered", function() {  **// This works**
    console.log('startLayout:rendered =>StartController'); **// This works**
    // render views for the existing HTML in the template,...
    var inspectorStartView = new InspectorStartView();
    //  and attach it to the layout (i.e. don't double render)
    Controller.layout.inspectorStart.attachView(inspectorStartView);
    Controller.trigger('inspectorStart:show', inspectorStartView); **// This works**
...snip...

However, when I try to use the extended marionette ItemView I can't get events or triggers to work.

// views/InspectorStartView.js
// -------
define(["jquery", "marionette", "text!templates/InspectorStart.html"],

function($, marionette, template){

    var InspectorStartView = marionette.ItemView.extend({
       template: template,

        events: {
            'click .starting_thumbnail' : 'start'
            //'click #inspectorStart' : 'start' **// didn't work either**
        },
        //I had also tried triggers
        triggers: {
            //'click .starting_thumbnail' : 'inspectorStart:start'
            'click #inspectorStart' : 'inspectorStart:start' **// didn't work either**
        },


        start:function (){  **// Doesn't get called**
            console("Caught InspectorStartView click")
            this.trigger("inspectorStart:start")
        }

    });

    // Returns the View class
    return InspectorStartView;
});

Here is the template:

<!-- InspectorStart.html -->
<div id="inspectorStart" class="thumbnail starting_thumbnail">
<img src="/img/detective-97715888.jpg" alt="Inspector" width="200px" height="300px">
<div class="caption">
    <h3>Inspectors Enter Here</h3>
    <p>Den Masters, Teachers, Parents, House Mothers, this is where you start.</p>
</div>
</div>

I did have to create the starting_thumbnail class so that I would get a pointer:

.starting_thumbnail{
cursor: pointer;
}

Do I need to do something else to make a div clickable?

On my first attempt I passed in App.vent and tried to use it to no avail now I'm extending the Controller {} with _.extend(Controller, Backbone.Events);

Following some debugging advice from @Ingro I logged what this.$el id for the ItemView. This: console.log(["InspectorStartView initalise ",this.$el])

Here is the output. There is nodeName: "DIV" and the localName is div.

["InspectorStartView initalise ", jQuery.fn.jQuery.init[1]]
0: "InspectorStartView initalise "
1: jQuery.fn.jQuery.init[1]
0: div
accessKey: ""
align: ""
attributes: NamedNodeMap
baseURI: "http://localhost:8001/index.html"
childElementCount: 1
childNodes: NodeList[3]
children: HTMLCollection[1]
classList: DOMTokenList
className: ""
clientHeight: 496
clientLeft: 0
clientTop: 0
clientWidth: 300
contentEditable: "inherit"
dataset: DOMStringMap
dir: ""
draggable: false
firstChild: #comment
firstElementChild: div#inspectorStart.thumbnail starting_thumbnail
hidden: false
id: ""
innerHTML: "<!-- InspectorStart.html -->↵<div id="inspectorStart" class="thumbnail starting_thumbnail">↵    <img src="/img/detective-97715888.jpg" alt="Inspector" width="200px" height="300px">↵   <div class="caption">↵      <h3>Inspectors Enter Here</h3>↵     <p>Den Masters, Teachers, Parents, House Mothers, this is where you start.</p>↵ </div>↵</div>"
innerText: "↵Inspectors Enter Here↵Den Masters, Teachers, Parents, House Mothers, this is where you start.↵↵"
isContentEditable: false
lang: ""
lastChild: div#inspectorStart.thumbnail starting_thumbnail
lastElementChild: div#inspectorStart.thumbnail starting_thumbnail
localName: "div"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: null
nextSibling: null
nodeName: "DIV"
nodeType: 1
nodeValue: null
offsetHeight: 496
offsetLeft: 621
offsetParent: body
offsetTop: 388
offsetWidth: 300

<!-- all the on<eventname> were null -->

outerHTML: "<div><!-- InspectorStart.html -->↵<div id="inspectorStart" class="thumbnail starting_thumbnail">...snip..."
ownerDocument: #document
parentElement: li#inspector_start.span4
parentNode: li#inspector_start.span4
prefix: null
previousElementSibling: null
previousSibling: null
scrollHeight: 496
scrollLeft: 0
scrollTop: 0
scrollWidth: 300
spellcheck: true
style: CSSStyleDeclaration
tabIndex: -1
tagName: "DIV"

Of course above is inside the initialize method. I wanted to see the difference after creating a 'new' one:

/ controller show inspector in the layout / subview
Controller.on('inspectorStart:show', function(inspectorStartView) {
    console.log('show inspector start view');
    console.log(**'InspectorVartView instance this.$el : ', inspectorStartView.el**);
    Controller.layout.inspectorStart.show(inspectorStartView);
});

The output is much smaller:

InspectorVartView instance this.$el :  
<div>​
   <!-- InspectorStart.html -->
   <div id=​"inspectorStart" class=​"thumbnail starting_thumbnail">​…​</div>​
</div>​

@Ingro that is wrapped in a div why would that matter?

Does anyone see what I'm doing incorrectly?

Thanks,

Andrew jsFiddle(see comments below)

1
backbone.jsmarionettebackbone-events
The div #inspectorStart is the parent element of your view, your $el? In this case you should try this in your events: 'click' : 'start' – Ingro
@Ingro thanks for the suggestion. I tried 'click' : 'start' it didn't work. I changed the name from 'start' to 'fire' to see if the name made a difference. It doesn't make a difference. It seems like it should be straight forward but for some reason it isn't, – KingAndrew
Here is the beginnings of a jsFiddle (jsfiddle.net/KingAndrew/SeDeL). I wasn't sure how to add backbone and marionette but it is a start. – KingAndrew
You should add it in the "Add Resources" panel on the left. Anyway it's not easy to replicate your structure on jsfiddle, cause you have also to add require, your templates etc. Have you tried to manually bind the event with jQuery on your browser's console? Like $(body).on("click",".starting_thumbnail",function(){ console.log("YAY"); }); and then try to click? – Ingro
Well try this: add an initialize function in your view and log this.$el. The element returned is the div #inspectorStart or a wrapper? – Ingro

1 Answers

0
votes

Turns out I had corrupted jquery somehow. I used jsfiddle to prove my code was correct. then I started looking at version number requirements and replaced jquery and it started working.

Thanks to @Ingro for your input.

Andrew