骨干子视图事件未触发

Question

我在 Backbone 中有一个视图，其中包含许多子视图。子视图的事件没有触发，我无法理解原因。我一直在关注一个教程，该教程展示了如何触发子视图的事件：

https://ianstormtaylor.com/rendering-views-in-backbonejs-isnt-always-simple

以下是相关部分代码：

var TaskView = Backbone.View.extend({
    tagName: "div",
    template: _.template($("#taskAddTemplate").html()),
    render: function () {
        // append the template to the element
        this.$el.append(this.template);

        var scheduleData = new ScheduleModel(this.model.attributes.Schedule);
        this.Schedule = new ScheduleView({ model: scheduleData });
        this.assign(this.Schedule, "#ScheduleDetails");
        return this;
    },
    assign: function(view, selector) {
        view.setElement(this.$(selector)).render();
    },
    events: {
        "submit #NewTaskForm": function (e) {
            e.preventDefault();

            $("#SaveTaskButton").effect("pulsate", { times: 0 }, 0);
            console.log("In submit for task");
        }
    }

});

var ScheduleView = Backbone.View.extend({
    tagName: "div",
    template: _.template($("#scheduleAddTemplate").html()),
    render: function () {
        // append the template to the element
        this.$el.append(this.template(this.model.toJSON()));
        // set the schedule type
        var renderedInterval = SetScheduleType(this.model);
        // append to the interval
        $("#Interval", this.$el).append(renderedInterval.el);
        return this;
    },
    events: {
        "submit #NewTaskForm": function (e) {
            e.preventDefault();
            console.log("In submit for schedule");
        }
    }
});

视图显示正确，但每当我单击 ID 为 NewTaskForm 的提交按钮时，都会为 Task 视图触发事件，而不是 Schedule 视图。我做错了什么？

编辑：

以下是模板：

<script id="taskAddTemplate" type="text/html">
    <nav class="navbar navbar-default" id="TaskMenu">
        <ul class="nav navbar-nav" id="TaskTabs">
            <li role="presentation"><a href="#TaskDetails" aria-controls="Task Details" role="tab" data-toggle="tab">Task Details</a></li>
            <li role="presentation"><a href="#ScheduleDetails" aria-controls="Schedule Details" role="tab" data-toggle="tab">Schedule Details</a></li>
        </ul>
    </nav>

    <form class="form form-horizontal" id="NewTaskForm">
        <div class="tab-content">

            <div role="tabpanel" class="tab-pane" id="TaskDetails">
                <div class="form-group">
                    <label class="col-xs-2 control-label">Task Name: </label>
                    <input class="col-xs-10 form-control" type="text" id="TaskName" name="TaskName" />

                </div>
                <div class="form-group">
                    <label class="col-xs-2 control-label">Message: </label>
                    <textarea class="col-xs-10 form-control" rows="5" type="text" id="Message" name="Message"></textarea>
                </div>
            </div>

            <div role="tabpanel" class="tab-pane" id="ScheduleDetails"></div>

            <div class="form-group">
                <div class="container">
                    <div class="col-xs-2">
                        <input type="submit" class="form-control btn btn-primary col-xs-2" id="SaveTaskButton" />
                    </div>
                    <div class="col-xs-2">
                        <input type="button" class="form-control btn btn-danger col-xs-2" id="CancelNewTaskButton" value="Cancel" />
                    </div>
                </div>
            </div>
        </div>
    </form>
</script>


<script id="scheduleAddTemplate" type="text/html">
    <div id="Schedule" class="form-group">

        <div class="row">
            <div class="col-xs-3">
                <span class="col-xs-1"></span>
                <select class="form-control" id="ScheduleType" data-val="true" data-val-required="The Schedule Type Field is require.">
                    <option value="hourly">Hourly</option>
                    <option value="daily">Daily</option>
                    <option value="weekly">Weekly</option>
                    <option value="monthly">Monthly</option>
                </select>
            </div>
            <div id="Interval" class="col-xs-9"></div>

        </div>

        <div id="StartAndEnd" class="row">

            <label class="control-label col-xs-1">Start</label>
            <input type="text" class="date form-control col-xs-2" id="StartDate" value="<%= StartDate %>" />
            <input type="text" class="time form-control col-xs-1" id="StartTime" value="<%= StartTime %>" />
            <label class="control-label col-xs-1">End</label>
            <input type="text" class="date form-control col-xs-1" id="EndDate" value="<%= EndDate %>" />
            <span class="col-xs-2"></span>
        </div>
    </div>
</script>

Answer 1

好的，有两种方法：

第一种方式

简单的方法是将NewTaskForm 移动到scheduleAddTemplate。这样，事件就会在那里触发，然后你可以用 trigger 来触发它

events: {
    "submit #NewTaskForm": 'onSubmit'
},
onSubmit: function(ev){
    e.preventDefault();
    console.log("In submit for schedule");
    //TODO: Call the save method
    this.model.save(
        success: function(...){
            this.trigger('save')
        }
    )
}

并在 TaskView 的渲染方法中添加这个

var scheduleData = new ScheduleModel(this.model.attributes.Schedule);
this.Schedule = new ScheduleView({ model: scheduleData });
this.assign(this.Schedule, "#ScheduleDetails");
this.listenTo(this.Schedule, "save", function(...){})

第二种方式

另一种方法是调用从TaskView 到ScheduleView 的方法。由于您已经有一个存储视图的变量，因此您可以在事件方法中调用它

events: {
    "submit #NewTaskForm": function (e) {
        e.preventDefault();

        $("#SaveTaskButton").effect("pulsate", { times: 0 }, 0);
        console.log("In submit for task");
        this.Schedule.method_name()
    }
}

无论如何，由于您在计划视图中没有额外的逻辑，因此不需要额外的视图，您可以在一个简单的视图中完成所有操作。