[Backbone] Working with forms
Our first step is to add a template to the AppointmentForm below. Have the template produce a form with two inputs, one for the title of the appointment and one for the name of the person on the appointment. So the "name" attributes on the inputs should be name and title, respectively. Yes, you'll have an input with name="name". YOLO.
var AppointmentForm = Backbone.View.extend({
template: _.template('<form><input type="text" name="title" /><input type="text" name="name" /></form>'),
});
Now write the render function to render the template and pass in the model attributes. Return this from the render function.
var AppointmentForm = Backbone.View.extend({
template: _.template('<form><input name="title" type="text" /><input name="name" type="text" /></form>'),
render: function(){
this.$el.html(this.template(this.model.attributes));
return this;
}
});
Update the template to use the title and name attributes from the model to fill out the value attributes of the input elements in the template.
var AppointmentForm = Backbone.View.extend({
template: _.template('<form><input name="title" type="text" value="<%= title%>"/><input name="name" type="text" value="<%= name%>"/></form>'),
render: function(){
this.$el.html(this.template(this.model.attributes));
return this;
}
});
Update the AppointmentForm view to handle the submit event on the form. Also go ahead and implement the function to handle that event. It should save both the title and name attributes on the model with values from their respective inputs. Make sure the event function stops the default event from happening (which would cause the browser to submit the form, instead of us handling it with our Backbone model.)
var AppointmentForm = Backbone.View.extend({
template: _.template('<form><input name="title" type="text" value="<%= title %>" /><input name="name" type="text" value="<%= name %>" /></form>'),
events: {
'submit': 'save'
},
render: function(){
this.$el.html(this.template(this.model.attributes));
return this;
},
save: function(e){
e.preventDefault();
var title = this.$('input[name="title"]').val();
var name = this.$('input[name="name"]').val();
this.model.save({title: title, name: name});
}
});
After submitting the form and saving the model, make sure we navigate the user back to the index route ''. Also, make sure this only happens if the model is saved successfully.
var AppointmentForm = Backbone.View.extend({
template: _.template('<form><input name="title" type="text" value="<%= title %>" /><input name="name" type="text" value="<%= name %>" /></form>'),
events: {
'submit': 'save'
},
render: function(){
this.$el.html(this.template(this.model.attributes));
return this;
},
save: function(e){
e.preventDefault();
var title = this.$('input[name="title"]').val();
var name = this.$('input[name="name"]').val();
this.model.save({title: title, name: name}, {
success: function(){
Backbone.history.navigate('', {trigger: true});
}
});
It's possible that saving the appointment on the server will fail and the server will respond with error messages. Add an error callback to the save call to handle this case and alert the user with the errors from the response.
var AppointmentForm = Backbone.View.extend({
template: _.template('<form><input name="title" type="text" value="<%= title %>" /><input name="name" type="text" value="<%= name %>" /></form>'),
render: function(){
this.$el.html(this.template(this.model.attributes));
return this;
},
events: {
submit: "save"
},
save: function(e){
e.preventDefault();
var newTitle = this.$('input[name=title]').val();
var newName = this.$('input[name=name]').val();
this.model.save({title: newTitle, name: newName}, {
success: function(){
Backbone.history.navigate('', {trigger: true});
},error: function(model, xhr, options){
var error = JSON.parse(xhr.responseText).errors;
alert(error);
}
});
}
});
最新文章
- JavaScript随笔目录
- Page Visibility(页面可见性) API介绍、微拓展[转]
- IE下默认TD colspan rowspan值为1
- Get the Uniqueid of Action Originate in the AMI
- Activiti 流程实例、任务、执行对象及相关的表
- ./adb: cannot execute binary file:
- SQL SERVER 生成MYSQL建表脚本
- 如何使用数据卷在宿主机和docker容器之间共享文件
- 【模拟】NCPC 2014 D Dice Game
- SPOJ3267--D-query （主席树入门练习）
- HDU1166(分块)
- 什么是GPIO?
- 初次认识：Transfer-Encoding: chunked
- Orleans学习总结(四)--集群配置篇
- 码云创建maven工程
- [日常工作] 并行计算引发Microsoft.jscript.ni.dll的内存溢出问题的分析解决. .net framework 的版本说明
- zabbix出现中文不能选的情况
- Java中使用OpenSSL生成的RSA公私钥
- css3旋转、过渡、动画属性
- Linux 利用hosts.deny 防止暴力破解ssh