Backbone Basics: 2015

Exercise-10:Listening for changes to Model

Solution

Override initialize method of Model with following code

initialize: function(){
console.log("model initialized");
this.on("change:name", function(e){console.log( "Mr"+e.get('name'));});
}

Instantiate model and watch console. You should see console with value "Mr.Jain Sood"

person.set('name','Jain Sood'));

Exercise-9: Add Custom Methods to Model

Introduction
Defaults, Initialize etc are native methods of Model.Models can also contain as many custom methods as you like to manipulate attributes. By default all methods are public.

Solution

Modify Model code to add following custom method

changeName: function(newName){this.set('name', newName)}

Using following code instantiate model and check console.

var person = new human;
console.log(person.get('name'));
person.changeName('Technolodge');
console.log(person.get('name'));

Exercise-8: Model

Introduction

Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.

Solution

Include following code in 'main.js' and check conole.

var human = Backbone.Model.extend({
            initialize: function(){

                console.log("Model got initialized);

});

var person = new human;

Using default value to set Model Attributes

Modify above code with following and check console.

var human = Backbone.Model.extend({


defaults: {

  name: 'Guest User',

  age: 23,

  occupation: 'Worker'



 },
initialize: function(){

                console.log("Model got initialized);

});

var person = new human;
console.log(person.get('name'))

Using constructor to set Model Attributes

var human = new Person({ name: "Twomot", age: 01});
console.log(person.get('name')+'-'+console.log('age'));

Using getters / Setters

var human = new Person({ name: "Wipro"});
human.set('age', 23);

console.log(person.get('name')+'-'+console.log('age'));

Exercise-7- Listening to Events

Introduction

To attach a listener to our view, we use the “events” attribute of Backbone.View. Remember that event listeners can only be attached to child elements of the “el” property. Let us attach a “click” listener to our button.

Solution

Modify extended back bone view to include following. Type any value to search input box and click search button. You should get the input text on console.

//Note that input[id=search_button] is filtering all input elements to match id="search_button"

events: {
"click input[id=search_button]": "doSearch",

},

doSearch: function( event ){
// Button clicked, you can access the element that was clic\ kedwithevent.currentTarget
console.log( "Search for " + $("#search_input").val() );

},

Exercise-6: Loading a Template

Solution

Replace Index.html existing code with following code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

</head>

<body>
<script type="text/template" id="search_template">

<input type="text" id="search_input" />
<input type="button" id="search_button" value="Search"/>

</script>
<div id="search_container"></div>

<script src="lib/jquery-1.9.1.min.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="lib/backbone-min.js"></script>
<script src="js/main.js"></script>

</body>

</html>

Modify the extended backbone view (as in #5) to following

initialize: function(){
this.display(); //Call Display Function
},

display: function(){
var template = _.template( $("#search_template").html(), {});
this.$el.html( template );

}

    // Load the compiled HTML into the Backbone "el"

    this.$el.html( template );

Exercise-5 : Creating a view that will get associated with an existing DOM element

Introduction
Backbone views are used to reflect what your applications’ data models look like. They are also used to listen to events and react accordingly.

Inside Main.js write following code and inspect Object view1

Extend a Backbone View and instantiate the extended object

var sampleView = Backbone.View.extend({
    initialize: function() {
        console.log('sampleView has been created');
    }
});

var view1 = new sampleView({ el: $("#search_container") });

Exercise-4: Use Backbone Boiler plate code

Solution

Create index.html using following code and place it in web root of your node server. Preview same in browser

Note that code in green is installed and maintained using bower
Create a folder "js" in web root of your node server and create a simple javascript file "main.js"
Inside "main.js" write code console.log(Backbone);
Preview the file from chrome browser and right click inspect. Check the Backbone object attributes / methods

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

</head>

<body>

<script src="lib/jquery.min.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="lib/backbone-min.js"></script>
<script src="js/main.js"></script>

</body>

</html>