@symbol in an object key

Question

I do not know a suitable place to post this question, but I read 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 the @ symbol in an object key before. Does @ mean anything or is it just part of the line and doesn't do anything special?

Answer 1

TL DR A line starting with the @ symbol in the property name of the event object in the Backbone.Marionette view is processed by Marionette. Marionette will match the line after @ui. and replace it with the corresponding value in this representation ui hash. In your example, "click @ui.destroy" becomes "click .destroy-btn" .

---

Marioneton ui

Marionette has been fortified with a little syntactic sugar to help you better organize your DOM dependencies. In other words, puppet views can use the ui hash in your view, which contains references to DOM elements inside this el view. In your example, you set

 ui: { "destroy": ".destroy-btn" } 

This assumes that your presentation template will contain at least one element with the class .destroy-btn . After displaying your view, Marionette will call view.bindUIElements , and each member of your ui hash will be populated with a jQuery object that represents the elements (elements) that correspond to the selector passed to the ui object.

So in your view this.ui.destroy will return a jQuery object for the .destroy-btn inside your el view.

Puppet parses events hash

Another thing that Marionette will do for you, and , where your question comes in , analyzes your events hash. If he finds any events properties that include the @ui. prefix @ui. , it will write the line after . and return the selector stored in the ui hash.

So if you have

 events: { "click @ui.destroy": "warnBeforeDestroy" } 

Marionette will give Backbone an event hash that looks like this:

 events: { "click .destroy-btn": "warnBeforeDestroy" } 

Further link

See Events for Puppets and bindUIElements

Answer 2

These are ordinary object keys. Nothing special about them.

 var events = { "click @ui.destroy": "warnBeforeDestroy" }; events["click @ui.destroy"]; // 'warnBeforeDestroy' 

It seems like they are probably special in the context of Marionette, but this is not JSON dependent.

Answer 3

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

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

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

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

Please note: if you want to use the Javascript object as a dictionary for shared storage, you may run into problems with inherited attributes ... for example:

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

however, you can determine whether a key or part of an instance of a particular object is hasOwnProperty using hasOwnProperty .