@ symbol in object key

Question

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?

Pontias

It's just part of the string that is the key for that object. There's nothing special about it. – Cheops

@Eclecticist Thanks! I was thinking it was just part of the string but did not know symbols other than underscores were valid. Thanks! – Pontias

That's not JSON, that's just a JavaScript object literal. JSON is a text data format that is based on JavaScript. – Cyruscyst

From here: "An object property name can be any valid JavaScript string, or anything that can be converted to a string, including the empty string.". – Relevance

Answer 1

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".

---

Marionette 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.bindUIElementsand 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.

Marionette parses the events hash

The 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"
}

Further reference

See Marionette events and bindUIElements

Replacement

Thank you! This is exactly what I was looking for. My initial impression was that the @ was part of the string, but it was unclear if it did something different in Marionette to me. Thanks! – Pontias

It's an excellent question. You did a service to our community for asking it. So, my pleasure, and thank you, too! – Replacement

Answer 2

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.

Incommunicado

Answer 3

JSON is a format for describing objects as text data, so there are no JSON objects... only JSON strings, like "[1,2,3]" that is JSON representation for an array of three elements.

What you're showing is a Javascript object and they can use any string as key and the character @ is really nothing special.

If you try to use something that is not a string as key it will work anyway by first converting it to a string... for example:

var obj1 = {};
obj1[12] = 99;
console.log(obj1["12"]);

Note that if you want to use a Javascript object as a dictionary for generic storage you can bump into problems with inherited attributes... for example:

var obj2 = {};
if (obj2["constructor"]) { console.log("What? not empty?"); }

you can however detect if a key is inherited or part of the specific object instance with hasOwnProperty.

Jansen