Keren Keren - 3 months ago 7
jQuery Question

curly braces followed by event, what does that mean in javascript module?

Currently I'm studying on javascript module. I came across this file which confuses me with the usage of curly braces and click event places after it. Though I can guess that it might mean,


if the element (inside curly braces) clicked do this..


I would like to confirm it and know the reason it's binded this way.

$(document).on("click.es.reports.link", "[data-reports-link]", function(){

var button = $(this);
var props = "url,extension,uid,type,object,title,description".split(",");
var data = {};

$.each(props, function(i, prop){
data[prop] = button.data(prop);
});

FunSocial.dialog({

content: FunSocial.ajax("site/views/reports/confirmReport", {
title: data.title,
description: data.description
}),
selectors: {
"{message}": "[data-reports-message]",
"{reportButton}": "[data-report-button]",
"{cancelButton}": "[data-cancel-button]"
},
bindings: {

"{reportButton} click": function() {

..code removed for brevity...
},

"{cancelButton} click": function() {
..code removed for brevity...
}
}
});
});


from the code above,

what does this mean:

"{message}": "[data-reports-message]",


And what does this mean:

"{reportButton} click": function() {
..code removed for brevity...
},

Answer

Both

"{message}": "[data-reports-message]",

and

"{reportButton} click": function() {
    ..code removed for brevity...
    },

...are in object initializers; they create properties with exactly those names:

var obj = {
  "{message}": "[data-reports-message]"
};
console.log(obj);

The {} parts look like placeholders that FunSocial.dialog does something with. For instance, in your second example:

"{reportButton} click": function() {
    ..code removed for brevity...
    },

...I suspect it takes that name, replaces {reportButton} with the necessary selector to identify the "report button," and then sets up an event handler on that button.

Comments