javascript - Backbone .牵线木偶触发器

Question

我希望使用 Backbone.Marionettes' 消息总线，通过内置的 Trigger< 将事件从 ItemView 冒泡到相应的 Controller 方法。

下面，触发器方法正在监听正确的 jQuery 事件，但在函数触发之前，我收到一条控制台消息:

"Uncaught TypeError: Cannot call method 'replace' of undefined"

list_view.js.coffee:

@GWA.module "QuestionsApp.List", (List, App, Backbone, Marionette, $, _) ->

class List.Layout extends App.Views.Layout
    template: "questions/list/templates/question_layout"
    
    regions:
        optionRegion: "#option-region"
        questionRegion: "#question-region"

class List.Panel extends App.Views.ItemView
    template: "questions/list/templates/_question_panel"

class List.Question extends App.Views.ItemView
    template: "questions/list/templates/_question"

    onShow: (view) ->
        $(".slidetrack-survey").slider
            min: 0
            max: 100
            value: 50
            create: ->
                id = $(this).attr("id").replace("survey-slider-", "")
            change: ->
                $(this).addClass "moved"

    triggers:
        'slidechange .slidetrack' : (e, attrs) -> 
            App.execute "question:response", e, attrs.model

class List.Empty extends App.Views.ItemView
    template: "questions/list/templates/_empty"

class List.Questions extends App.Views.CompositeView
    template: "questions/list/templates/_questions"
    itemView: List.Question
    emptyView: List.Empty

list_controller.js.coffee:

@GWA.module "QuestionsApp.List", (List, App, Backbone, Marionette, $, _) -> 

class List.Controller extends Marionette.Controller
    
    initialize: ->
        questions =  App.request "question:entities", (questions) => 
            App.execute "when:fetched", questions, =>
                @layout = @getLayoutView questions
                @listenTo @layout, "change", @listQuestions questions
                @listenTo @layout, 'show', => 
                    @questionRegion()

    questionRegion: (questions) ->
        questionView = @getQuestionsView questions
        @listenTo questionView, "question:response", (args) ->
            @handleSliderChange(args)

        @layout.questionRegion.show questionView

    handleSliderChange: (args) ->
        console.log args.view
        console.log args.model
        console.log args.collection

    listQuestions: (questions) -> 
        @layout = @getLayoutView()
        @layout.on "show", =>
            @showQuestions questions
        App.dashboardRegion.show @layout

    showQuestions: (questions) ->
        questionsView = @getQuestionsView questions
        @layout.questionRegion.show questionsView

    getQuestionsView: (questions) ->
        new List.Questions
            collection: questions

    getLayoutView: ->
        new List.Layout

Answer 1

问题很可能发生，因为您尝试在触发器内进行处理:

triggers:
    'slidechange .slidetrack' : (e, attrs) -> 
        App.execute "question:response", e, attrs.model

触发器应该只是将事件从 View 冒泡到更高级别，某种 Controller 可以处理它。实际上，您不会冒泡任何内容，而是立即处理事件，这会让 Marionette 感到困惑。

对于这种情况，最简单的方法是使用事件哈希并将逻辑移动到外部函数，如下所示:

events:
    'slidechange .slidetrack' : 'onSlideChange'

onSlideChange: (e, attrs) -> 
    App.execute "question:response", e, attrs.model