Question

我有一张桌子，当我点击一行时，在侧面div中我会显示详细信息。我在行（tr）上创建了一个事件，每次单击该行时都会触发该事件。我遇到的问题是该事件被多次触发。它就像每次触发事件时创建一个新视图一样，但是没有创建新视图。这是代码：

GroupView = class App.GroupView extends Backbone.View
    template: App.Utils.getTemplate 'group'
    selectedId: 0

    events:
        'click tr': 'selectGroup'

    selectGroup: (e) ->
        thisEl = $(e.currentTarget)
        $(thisEl).closest('tr').siblings().removeClass 'selected'
        $(thisEl).closest('tr').addClass 'selected'
        @selectedId = $(thisEl).data().id
        @getGroupDetails @selectedId

    render: -> 
        $(@$el).html @template
            groups: @collection.models

        if @selectedId is 0
            firstRowEl = $(@$el).find('tr:first')
            $(firstRowEl).addClass 'selected'
            @selectedId = $(firstRowEl).data().id

        @getGroupDetails @selectedId

    getGroupDetails: (id, platform) ->
        $('<img/>', 
            src: 'img/ajax_loader_2.gif'
            class: 'ajax-loader'
            ).appendTo '.group-details'

        renderGroupDetails id

groupDetails = new GroupDetailsView
    el: '.group-details'
    model: groupDetailsModel

renderGroupDetails = (id)->
    groupDetails.el = '.group-details'
    groupDetails.stopListening groupDetailsModel
    groupDetails.listenTo groupDetailsModel, 'change', ->
    groupDetails.model = 
        groupDetails: groupDetailsModel.toJSON()
    groupDetails.render()

    groupDetailsModel.fetch
        data:
            id: id
        processData: true

问题在于，当我使用groupDetails.stopListening groupDetailsModel时，多事件触发问题已解决，但groupDetails视图中没有事件被触发。

感谢任何帮助。

干杯，

Kianosh

Answer 1

所以，给你一个特定的答案是困难的：你粘贴的代码有点难以理解，似乎可能缺少位（例如，什么是groupDetailsModel？它是否有任何逻辑这影响了它的观点？）。这没关系，因为我认为你需要的是比特定答案更多的调试帮助。

如果我理解正确，你的问题是groupDetails.render()被多次调用，而你不确定为什么或什么在调用它：这是正确的吗？如果是这样，您可靠的调试器可以在几秒钟内回答这个问题。

注意：我要说的所有内容都适用于Chrome（内置开发人员工具）或Firefox（Firebug扩展程序）。它可能也适用于其他浏览器及其工具，我不能肯定地说，因为我不使用它们。

方法＃1：调试器

启动调试器后，在debugger;方法中首先添加GroupDetails.prototype.render行。这将使您的浏览器在它到达时暂停在该行上。暂停时，您可以检查右侧的“调用堆栈”，这将显示完全您的代码刚刚调用的那个位。您还可以使用调试器检查环境中不同变量的值，以尝试理解为什么您的代码正在调用render。

方法＃2：Console.trace

如果您不是使用调试器的粉丝，那么还有另一种工具也非常适合回答这类问题。只需添加console.trace()作为渲染方法的第一行，然后照常运行代码。这次您的浏览器将记录（到“控制台”）从代码中的该点生成的堆栈跟踪。此堆栈跟踪类似于您在使用debugger时可以看到的调用堆栈，因此它将准确告诉您每次调用render的代码。

希望有所帮助。

即使我遵循正确的标准，主动事件也会多次触发

1 个答案: