@ 对象键中的符号

@ symbol in object key

我不知道 post 这个问题的正确位置，但我正在阅读 Marionette 文档并在描述

时看到了以下代码

Marionette.Behaviors:

var MyView = Marionette.ItemView.extend({
    ui: {
        "destroy": ".destroy-btn"
    },

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

我以前从未在对象键中看到过 @ 符号。 @ 是什么意思，还是只是字符串的一部分，没有什么特别之处？

那些只是普通的对象键。他们没什么特别的。

var events = {
    "click @ui.destroy": "warnBeforeDestroy"
};

events["click @ui.destroy"]; // 'warnBeforeDestroy'

看起来那些在 Marionette 的上下文中可能是特殊的，但这与 JSON 无关。

JSON是一种将对象描述为文本数据的格式，所以没有JSON个对象...只有JSON个字符串，像"[1,2,3]"就是JSON 表示三个元素的数组。

你展示的是一个 Javascript 对象，他们可以使用任何字符串作为键，字符 @ 真的没什么特别的。

如果您尝试使用不是字符串的内容作为键，它无论如何都可以通过首先将其转换为字符串来工作...例如：

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

请注意，如果您想使用 Javascript 对象作为通用存储的字典，您可能会遇到继承属性的问题...例如：

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

然而，您可以使用 hasOwnProperty.

检测密钥是继承的还是特定对象实例的一部分

TL;DR Backbone.Marionette 视图中事件对象的 属性 名称中以 @ 符号开头的字符串是由 Marionette 解析。 Marionette 将匹配 @ui. 之后的字符串，并将其替换为该视图的 ui 散列中的相应值。在您的示例中，"click @ui.destroy" 变为 "click .destroy-btn"。

Marionette ui

Marionette 增强了一些语法糖，以帮助您更好地组织视图中的 DOM 依赖项。换句话说，marionette 视图可以在您的视图中使用 ui 散列，该散列包含对该视图 el 内的 DOM 元素的引用。在您的示例中，您设置了 

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

这假定您的视图模板将至少有一个具有 class .destroy-btn 的元素。呈现视图后，Marionette 将调用 view.bindUIElements 并且 ui 散列的每个成员都将填充 jQuery 对象，该对象表示与选择器传递给 ui 对象。

因此，在您的视图中，this.ui.destroy 将 return 选择器的 jQuery 对象 .destroy-btn 在您的视图中 el.

Marionette 解析 events 散列

另一件事 Marionette 将为您做，这就是您的问题所在 ，是解析您的 events 哈希。如果它找到任何包含 @ui. 前缀的 events 属性，它将捕获 . 和 return 存储在 ui 哈希中的选择器之后的字符串。

所以，如果你有 

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

Marionette 将交给 Backbone 一个 events 散列，如下所示：

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

进一步参考

参见 Marionette events 和 bindUIElements