0

我一直在浏览主干js官方文档，但我似乎找不到答案，下面是他们网站的片段

var DocumentRow = Backbone.View.extend({

   tagName: "li",

  className: "document-row",

  events: {
   "click .icon":          "open",
   "click .button.edit":   "openEditDialog",
   "click .button.delete": "destroy",
   "click .list1 .item1" : "open",
 },

  render: function() {
  ...
}

});

我不明白的是事件：部分它在说什么？

有人可以用简单的英语解释以下内容或指出我在文档中可以找到的位置吗

   "click .icon":          "open",
   "click .button.edit":   "openEditDialog",
   "click .button.delete": "destroy",
   "click .list1 .item1" : "open",

??

谢谢

4

2 回答 2

2

事件部分从字面上委托给 JQuery（或您正在使用的任何东西）：

“点击 .icon”：“打开”

将事件绑定到click具有类的任何元素上icon，范围为您的视图el，并将调用该open函数。

用 JQuery 说话：

$(el).on("click", ".icon", open)
于 2012-08-08T04:00:21.673 回答
0

它基本上是将您的 DOM 事件链接到您的视图方法。

基于这样的事情......

var DocumentRow = Backbone.View.extend({

    tagName: "li",

    className: "document-row",

    events: {
        "click .icon": "open",
        "click button.edit": "openEditDialog",
        "click button.delete": "destroy",
        "click .open": "open",
    },

    open: function() {
        // The open something code here
    },
    openEditDialogue: function() {
        // Code to open edit dialogue
        var editDialogue = new EditDialogueView(); // etc.
    },
    destroy: function() {
        this.model.destroy();
    }

...

您的视图 el 可能看起来像这样。

<li class="document-row">
    <div class="list1">
        <img src="someSRC" class="icon" />
        <button class="edit">EDIT</button>
        <button class="delete">DELETE</button>
        <button class="open">OPEN</button>
    </div>
</li>

它不必看起来像这样，但我只是根据事件声明的内容重新创建 DOM。

用简单的英语，基本上这是在说：

如果我单击带有类图标的元素，请运行 open() 方法。如果我单击带有类编辑的按钮元素，请运行 openEditDialogue() 方法。如果我单击带有类删除的按钮元素，请运行销毁方法。如果我单击类打开的元素，请运行 open() 方法。

因此，基本上通过创建 event: {} 对象并使用您的事件规则、侦听器将附加到的 DOM 元素以及处理程序（在此视图类中）来填充它，您可以设置基本视图功能。

于 2012-08-08T04:12:10.460 回答