/* Welcome to the Anatomy of Backbone.js challenges! We're going to be building a simple Appointment app for our friend, Dr. Goodparts.
So, let's get started and create an Appointment model class.
*/
// Create a model class
var Appointment = Backbone.Model.extend({});/* Now that we have our Appointment model class, let's create our first instance and assign it to the appointment variable. Pass in a title for the appointment when creating it.
Note Check out the JS Source tab below that will display relevant code for this challenge. */
// Same like creating new object, and assigning property(ies) to that object
var appointment = new Appointment({
title: "Hello Backbone"
});/* Well look at that, we have our very first appointment. But it isn't so useful, sitting there deep down in the bowels of your browser. To display it lets first create a view class and name it AppointmentView. */
var AppointmentView = Backbone.View.extend({});/* The perfect place to put our display code now exists! Now it's time to create our first AppointmentView instance. When doing so, don't forget to include the appointment model instance we just created. Assign the instance to a variable. */
// Creating another new object that assign the model that you want to assign that you have created,
// in this case VARIABLE appointment
var appointmentView = new AppointmentView({model: appointment});/* Our AppointmentView instance is almost ready, all we have to do is go back and define the AppointmentView render function so we can actually create some HTML. Have the render function add an <li> tag to the top-level element of the view. Use this.model.get('title') as the content of the <li>. */
// Back to the MODEL class that we define at previous step, and fill in with the DATA and any HTML Tags
var AppointmentView = Backbone.View.extend({
// Create some sort of OBJECT METHOD call render, the property name render can not be change
render: function(){
// Create a variable that holds the data, call the data by 'THIS' 'Backbone MODEL' and
// 'Instance variable that we have created that stored the DATA previously'
var anyVarName = "<li> " + this.model.get("title") + " </li>";
// Let jQuery handle 'THIS' because if we do not use jQuery, 'THIS' will have different value
// Write into HTML using jQuery FUNCTION for the variable that we just created inside this RENDER FUNCTION
$(this.el).html(anyVarName);
}
});/* Almost there, but before we display anything let's set the title of the appointment instance! Set it to any string, perhaps something you'd like Dr. Goodparts to take a look at (ex. My Backbone Hurts). */
/* Regarding the SET:
getmodel.get(attribute)
Get the current value of an attribute from the model. For example: note.get("title")
setmodel.set(attributes, [options])
Set a hash of attributes (one or many) on the model. If any of the attributes change the model's state, a "change" event will be triggered on the model. Change events for specific attributes are also triggered, and you can bind to those as well, for example: change:title, and change:content. You may also pass individual keys and values.
note.set({title: "March 20", content: "In his eyes she eclipses..."});
book.set("title", "A Scandal in Bohemia");
*/
appointment.set({title: 'My Backbone Hurts'});/* Time to show Dr. Goodparts his first appointment. Render the appointmentView instance and then insert its top-level element into #app using $('#app').html(). */
// Call the RENDER METHOD from VARIABLE appointmentView
appointmentView.render();
// Once we call the appointmentView METHOD, we can call the EL method from the jQuery in the appointmentView RENDER METHOD
$('#app').html(appointmentView.el);