[Backbone] Verying Views
Below we have our AppointmentsView
instance rendering and then taking the rendered HTML and inserting into the$('#app')
element.
Change the code to instead pass in the $('#app')
element into the view constructor to make it theappointmentsView.el
.
var appointmentsView = new AppointmentsView({collection: appointments, el: $('#app')}); appointmentsView.render();
Update the AppointmentsView
class to handle the extra option doctor
passed into the constructor, like so: new AppointmentsView({collection: appointments, doctor: drGoodparts})
Assign the extra option to thedoctor
property on the view instance.
var AppointmentsView = Backbone.View.extend({ initialize: function(options){ this.doctor = options.doctor; } });
Dr. Goodparts recently hired an intern to input appointments and they've been injecting appointments with malicious titles to hack Dr. Goodparts' computer.
The intern was fired but you should probably update the AppointmentView
to escape the title content.
var AppointmentView = Backbone.View.extend({ template: _.template("<span><%= model.escape('title') %></span>"), render: function(){ this.$el.html(this.template({model: this.model})); } });
As you can see in the view code below, whenever the model's title
attribute changes, we update the title in the view and highlight it to let the user know that it's been updated. Sometimes we want to be able to change the title without highlighting the view, but with still updating it in the view.
To accomplish this, we are passing in {highlight: false}
. Update the changedTitle
function below to use this extra option to selectively highlight the view.
var AppointmentView = Backbone.View.extend({ template: _.template("<span><%= title %></span>"), initialize: function(){ this.model.on('change:title', this.changedTitle, this); }, render: function(){ this.$el.html(this.template(this.model.attributes)); }, changedTitle: function(model, value, option){ this.$('span').html(value); if(option.highlight!=false){ this.$el.effect('highlight', {}, 1000); } } });
Use the new listenTo
View function to make the view listen to the model's 'change:title'
event, instead of having the model notify the view of the event. This way we can safely call remove()
on the view and feel confident all of our events are cleaned up.
var AppointmentView = Backbone.View.extend({ template: _.template("<span><%= title %></span>"), initialize: function(){ this.listenTo(this.model, 'change:title', this.render); }, render: function(){ this.$el.html(this.template(this.model.attributes)); }, changedTitle: function(model, value, options){ this.$('span').html(value); if (options.highlight !== false){ this.$el.effect('highlight', {}, 1000); } } });
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步