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

デバッガーを使用するのが苦手な場合は、この種の質問に答えるのに最適なツールがもう 1 つあります。console.trace()render メソッドの最初の行として追加するだけで、通常どおりコードを実行できます。今度は、ブラウザが (「コンソール」に) コードのその時点から生成されたスタック トレースを記録します。このスタック トレースは、 を使用したときに表示されるコール スタックに似ているため、毎回debugger呼び出されたコードを正確に知ることができます。render

それが役立つことを願っています。

于 2013-01-31T00:23:40.117 に答える