I don't know the proper place to post this question but I was reading the Marionette docs and saw the following code when describing
Marionette.Behaviors:
var MyView = Marionette.ItemView.extend({
ui: {
"destroy": ".destroy-btn"
},
events: {
"click @ui.destroy": "warnBeforeDestroy"
}
I have never seen an @
symbol in an object key before. Does the @
mean anything or is it just part of the string and does nothing special?
Symbols can be used as object keys. Only strings and symbols can be used as object keys. No two symbols are ever equal.
The keys of an object is the list of property names. The values of an object is the list of property values. The entries of an object is the list of pairs of property names and corresponding values.
Symbol is a built-in object whose constructor returns a symbol primitive — also called a Symbol value or just a Symbol — that's guaranteed to be unique.
The Symbol type allows us to obtain values that cannot be re-created, that is, they are unique and immutable identifiers. According to this definition, the one provided by MDN makes more sense since since the values created as Symbol will be unique, we can use them to identify properties of objects.
TL;DR The string starting with the @
symbol in the property name of an events object in a Backbone.Marionette view is parsed by Marionette. Marionette will match the string after @ui.
and replace it with the corresponding value in that view's ui
hash. In your example, "click @ui.destroy"
becomes "click .destroy-btn"
.
ui
Marionette was enhanced with a little syntactic sugar to help you better organize the DOM dependencies in your view. In other words, marionette views can make use of an ui
hash in your view that holds references to DOM elements inside that view's el
. In your example you set
ui: {
"destroy": ".destroy-btn"
}
This assumes that your view template will have at least one element with class .destroy-btn
. After your view is rendered, Marionette will call view.bindUIElements
and each member of your ui
hash will be populated with the jQuery object that represents the element(s) that match the selector passed in to the ui
object.
Thus, in your view, this.ui.destroy
will return the jQuery object for the selector .destroy-btn
inside your view's el
.
events
hashThe other thing Marionette will do for you, and this is where your question comes in, is parse your events
hash. If it finds any events
properties that include an @ui.
prefix it will capture the string after the .
and return the selector stored in your ui
hash.
So, if you have
events: {
"click @ui.destroy": "warnBeforeDestroy"
}
Marionette will hand Backbone an events
hash that looks like:
events: {
"click .destroy-btn": "warnBeforeDestroy"
}
See Marionette events and bindUIElements
Those are just normal object keys. Nothing special about them.
var events = {
"click @ui.destroy": "warnBeforeDestroy"
};
events["click @ui.destroy"]; // 'warnBeforeDestroy'
It looks like those are probably special in the context of Marionette, but that is independent of JSON.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With