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?

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?

• javascript
• backbone.js
• marionette

• 7 It's just part of the string that is the key for that object. There's nothing special about it. – user3886234 Commented Feb 9, 2015 at 22:49
• @Eclecticist Thanks! I was thinking it was just part of the string but did not know symbols other than underscores were valid. Thanks! – Mdd Commented Feb 9, 2015 at 22:50
• 5 That's not JSON, that's just a JavaScript object literal. JSON is a text data format that is based on JavaScript. – mu is too short Commented Feb 9, 2015 at 22:53
• 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.". – James Thorpe Commented Feb 9, 2015 at 22:54

3 Answers 3

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" bees "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 es 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

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.

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.