Question

I am firing up the ServiceStack social bootstrap api example to see how it works.

I clicked the “sign in” link and nothing happened. And I looked into the code (see attachment pic 1)

<a data-cmd="signIn">sign in</a>

On a click event of the “sign in” link, my understanding is the e.srcElement would be “a” tag here?

However, it says e.srcElement “undefined” (see attachment pic 2). So, the “signIn” cmd was never reached.

I didn’t change anything in the social bootstrap api example. What am I doing wrong??

(sorry about the picture size, please zoom in a bit with your browser to see the text more clearly)

Answer 1

Whilst I don’t care for IE in my demos, I do want to support Firefox. I’ve traced the issue down to this javascript error, e.g I’ve changed:

var dataCmd = $(e.srcElement).data('cmd');

to

var dataCmd = $(e.srcElement || e.target).data('cmd');

This change has been re-deployed to http://bootstrapapi.apphb.com

Basically the way it works is I have a global click handler to catch any clicks and if the src/target element has a cmd defined, I publish that to all the registered modules:

$(document.body).click(function (e) {
    console.log("handleClicks", e);
    var dataCmd = $(e.srcElement || e.target).data('cmd');
    if (!dataCmd) return;

    var cmd = dataCmd.split(':'),
        evt = cmd[0],
        args = cmd.length > 1 ? cmd[1].split(',') : [];

    app.sendCmd(evt, args);
});

So who ever is interested in that click can handle it. Which in the case of data-cmd="signIn" will be the register.js module, which just sets the user preference on the Backbone model:

signIn: function(e) {
    this.model.set({ hasRegistered: true });
},