Jquery 主干子视图事件未触发
我在主干中有一个视图,其中包含许多子视图。子视图的事件没有触发,我很难理解为什么。我一直在遵循一个教程,该教程演示了如何激发子视图的事件: 以下是代码的相关部分:Jquery 主干子视图事件未触发,jquery,backbone.js,underscore.js,Jquery,Backbone.js,Underscore.js,我在主干中有一个视图,其中包含许多子视图。子视图的事件没有触发,我很难理解为什么。我一直在遵循一个教程,该教程演示了如何激发子视图的事件: 以下是代码的相关部分: var TaskView = Backbone.View.extend({ tagName: "div", template: _.template($("#taskAddTemplate").html()), render: function () { // append the templ
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的submit按钮时,都会为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>
任务名称:
信息:
每小时
每日的
周报
月刊
开始
终点
好的,有两种方法:
第一条路
简单的方法是将NewTaskForm
移动到scheduleAddTemplate
。这样,事件将在那里触发,然后您可以使用触发器触发它
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
。由于已经有一个存储视图的变量,所以可以在事件方法中调用doit
events: {
"submit #NewTaskForm": function (e) {
e.preventDefault();
$("#SaveTaskButton").effect("pulsate", { times: 0 }, 0);
console.log("In submit for task");
this.Schedule.method_name()
}
}
无论如何,由于明细表视图中没有额外的逻辑,因此不需要额外的视图,您可以在一个简单的视图中完成所有操作。好的,有两种方法: 第一条路 简单的方法是将
NewTaskForm
移动到scheduleAddTemplate
。这样,事件将在那里触发,然后您可以使用触发器触发它
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
。由于已经有一个存储视图的变量,所以可以在事件方法中调用doit
events: {
"submit #NewTaskForm": function (e) {
e.preventDefault();
$("#SaveTaskButton").effect("pulsate", { times: 0 }, 0);
console.log("In submit for task");
this.Schedule.method_name()
}
}
无论如何,由于日程视图中没有额外的逻辑,因此不需要额外的视图,您可以在一个简单的视图中完成所有操作。两个模板(taskAddTemplate和scheduleAddTemplate)是否都在其主体中定义了#NewTaskForm?不,taskAddTemplate是“主视图”它有一个从scheduleAddTemplateOk获取值的表单。问题是主干中的事件标记只影响内部html,这样您就可以有多个子项,将事件添加到同一标记中。在您的情况下,如果希望在两个视图中都触发事件,则必须传递一个事件或更改结构OK,那么有没有办法让日程视图在按下任务视图的“保存”按钮时保存其模型?是的,这很容易做到。你能把你的模板发布到html上吗?这样我就可以写正确的答案了?两个模板(taskAddTemplate和scheduleAddTemplate)的正文中都定义了#NewTaskForm吗?不,taskAddTemplate是“主视图”,它有一个从scheduleAddTemplateOk获取值的表单。问题是主干中的事件标记只影响内部html,这样您就可以有多个子项,将事件添加到同一标记中。在您的情况下,如果希望在两个视图中都触发事件,则必须传递一个事件或更改结构OK,那么有没有办法让日程视图在按下任务视图的“保存”按钮时保存其模型?是的,这很容易做到。你可以发布你的模板html,这样我就可以写正确的答案了吗?去试试这个,如果它有效的话,我会用你的名字来命名我的长子。只要确保他不是一个编码员;)我要试试这个,只要它能用,我就用你的名字给我的长子起名。只要确保他不是一个编码员;)