[Backbone]3. More detail on View

Change the

AppointmentView

to have a top-level

li

tag (instead of the default

div

tag).

var AppointmentView = Backbone.View.extend({tagName: 'li'});

Make sure every

AppointmentView

top-level element is created with a class of

appointment

.

var AppointmentView = Backbone.View.extend({
tagName: 'li',
className: 'appointment'
});

Refactor the

render

function below to use the improved jQuery syntax on the top-level element.

var AppointmentView = Backbone.View.extend({
render: function(){
this.$el.html('<li>' + this.model.get('title') + '</li>');
}
});

Dr. Goodparts is getting ready to request some big changes to our

AppointmentView

. You know that eventually the HTML it generates is going to get pretty complicated, so now is probably a good time to refactor to use a template.

Make sure you generate the same HTML after switching to templates.

Tip: don't forget to use

this.model.toJSON()

in

render

var AppointmentView = Backbone.View.extend({
render: function(){
this.$el.html('<span>' + this.model.get('title') + '</span>');
}
});

　to

var AppointmentView = Backbone.View.extend({
template : _.template('<span><%= title %></span>'),
render: function(){
var attr = this.model.toJSON();
this.$el.html(this.template(attr));
}
});

Dr. Goodparts is just getting the hang of this web thing and thinks it'd be a good idea to

alert

the user the

title

of the appointment whenever they

click

on its view.

See if you can't appease his bad idea and implement this tragic UI interaction using View events.

var AppointmentView = Backbone.View.extend({
template: _.template('<span><%= title %></span>'),
events: {
"click": function(){alert(this.model.get('title'));}
},
render: function(){
this.$el.html(this.template(this.model.toJSON()));
}
});

Phew, over the weekend you convinced Dr. Goodparts to come to his senses and allow you to change the click event to only alert when the user

double clicks

on the view.

Make those changes quick and deploy!

var AppointmentView = Backbone.View.extend({
template: _.template('<span><%= title %></span>'),

events: { "dblclick span": "alertTitle" },
alertTitle: function(){
alert(this.model.get('title'));
},

render: function(){
this.$el.html(this.template(this.model.toJSON()));
}
});

-----------Final code------------

//Create a model CLASS
var Appointment = Backbone.Model.extend({});
//Define a object for model
var appointment = new Appointment({'title': "New appointment"});
//Create a View CLASS
/*var AppointmentView = Backbone.View.extend({
tagName: 'li',
className: 'appointment',
render: function(){
this.$el.html('<span>' + this.model.get('title') + '</span>');
}
});*/
//Using a better way to create html, underscore template
//Always get data from model
//render the data using this.model.toJSON() function
var AppointmentView = Backbone.View.extend({
template: _.template('<span><%= title %></span>'),
events: { "dblclick span": "alertTitle" },
alertTitle: function(){
alert(this.model.get('title'));
},
render: function(){
this.$el.html(this.template(this.model.toJSON()));
}
});
//create a view object, include the model instance
var appointmentView = new AppointmentView({model: appointment });
//set title
appointment.set('title', "Nice to meet you!");
//Show the final view
appointmentView.render();
$('#app').html(appointmentView.el);