Question

目前我正在学习javascript模块。我遇到了这个文件，它让我对花括号的使用感到困惑，并在其后点击事件位置。虽然我猜它可能意味着，

如果点击的元素（花括号内）执行此操作..

我想确认一下，并知道它以这种方式绑定的原因。

$(document).on("click.es.reports.link", "[data-reports-link]", function(){

        var button = $(this);
        var props = "url,extension,uid,type,object,title,description".split(",");
        var data = {};

        $.each(props, function(i, prop){
            data[prop] = button.data(prop);
        });

        FunSocial.dialog({

            content: FunSocial.ajax("site/views/reports/confirmReport", {
                    title: data.title,
                    description: data.description
            }),
            selectors: {
                "{message}": "[data-reports-message]",
                "{reportButton}": "[data-report-button]",
                "{cancelButton}": "[data-cancel-button]"
            },
            bindings: {

                "{reportButton} click": function() {

                    ..code removed for brevity...
                },

                "{cancelButton} click": function() {
                    ..code removed for brevity...
                }       
            }   
        });
    });

来自上面的代码，

这是什么意思：

"{message}": "[data-reports-message]",

这是什么意思：

"{reportButton} click": function() {
    ..code removed for brevity...
    },

Answer 1

两个

"{message}": "[data-reports-message]",

和

"{reportButton} click": function() {
    ..code removed for brevity...
    },

...在对象初始化器中;他们使用这些名称创建属性：

var obj = {
  "{message}": "[data-reports-message]"
};
console.log(obj);

{}部分看起来像FunSocial.dialog所做的占位符。例如，在你的第二个例子中：

"{reportButton} click": function() {
    ..code removed for brevity...
    },

...我怀疑它采用了这个名称，用必要的选择器替换{reportButton}以识别“报告按钮”，然后在该按钮上设置一个事件处理程序。

花括号后跟事件，这在javascript模块中意味着什么？

1 个答案: