Question

我一直在浏览骨干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",

...

感谢

Answer 1

事件部分直接委托给JQuery（或者你正在使用的任何东西）：

“click .icon”：“open”

将click事件绑定在icon类的任何元素上，作用于视图的el，并调用open函数。

在JQuery中说：

$(el).on("click", ".icon", open)

Answer 2

它基本上将您的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();
    }

...

你的观点可能看起来像这样。

<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（）方法。如果我单击带删除类的按钮元素，请运行destroy方法。如果我单击打开类的元素，请运行open（）方法。

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

骨干js事件绑定

2 个答案: