javascript - @ 对象键中的符号

Question

我不知道发布这个问题的正确位置，但我正在阅读 Marionette 文档并在描述时看到以下代码

Marionette.Behaviors :

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

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

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

Answer 1

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

---

Marionette ui

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

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

这假设您的 View 模板将至少有一个具有类 .destroy-btn 的元素。呈现 View 后，Marionette 将调用 view.bindUIElements 并且 ui 散列的每个成员都将填充代表匹配元素的 jQuery 对象传递给 ui 对象的选择器。

因此，在您的 View 中，this.ui.destroy 将为选择器返回 jQuery 对象 .destroy-btn 在您的 View 中 el.

Marionette 解析 events 哈希

Marionette 会为您做的另一件事是解析您的事件 哈希，这就是您的问题所在。如果它发现任何包含 @ui. 前缀的 events 属性，它将捕获 之后的字符串。 并返回存储在 中的选择器code>ui 散列。

所以，如果你有

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

Marionette 将向 Backbone 传递一个 events 散列，如下所示:

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

进一步引用

参见 Marionette events和 bindUIElements