0

我有一个表格，当我单击一行时，我会在侧面 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视图中没有任何事件被触发。

任何帮助表示赞赏。

干杯，

基亚诺什

4

1 回答 1

3

所以，给你一个具体的答案是困难的：你粘贴的代码有点难以理解，而且似乎它可能缺少一些位（例如，什么是groupDetailsModel？它有任何影响它的视图的逻辑吗？）。不过没关系，因为我认为您在这里需要的是更多的调试帮助，而不是具体的答案。

如果我对您的理解正确，您的问题是groupDetails.render()被额外调用，并且您不确定为什么或什么在调用它：正确吗？如果是这样，您值得信赖的调试器可以在几秒钟内回答这个问题。

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

方法 #1：调试器

调试器启动后，debugger;在方法中添加一行作为第一件事GroupDetails.prototype.render。这将使您的浏览器在遇到该行时暂停。当它暂停时，您可以检查右侧的“调用堆栈”，这将准确地显示您的代码中的哪一部分刚刚调用了该渲染。您还可以使用调试器检查环境中不同变量的值，以尝试了解您的代码为何调用render.

方法 2：Console.trace

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

希望有帮助。

于 2013-01-31T00:23:40.117 回答