The Backbone.js models are javascript objects which stores data for the application.In this post we will see how we can create and initialize these models by extending the Backbone.Model object. Let’s start with a very simple example as shown in the snippet below:

image

Here we have used the extend function of Backbone.Model to create the model definition and instantiate it. This is a simple object without any properties. We can create it with properties as shown below:

image

We will see the following in browser console.

Object t: {"a":1,"b":2}

Backbone.js also provides an option to set the default values for model properties by setting the default property in extend as shown below:

image

Here, while defining the model we are setting defaults values of “a” and “b” as 1 and 2. While creating the object we are overriding the default value of “a” with 3. We will see the following browser console.

Object t: {"a":3,"b":2}

Backbone.js also provides an option to write an initializer by exposing the initialize property in the extend.

image

Here we can see in the console,

Object is initialized.{"a":3,"b":2}

If we want further customization then we can override the constructor itself as shown below:

image

Here, we can see the following output in the console.

Object is created

Object t: undefined

Here we have used our constructor but the we can see that the object is not properly initialized.This is because we have not invoked the constructor for Backbone.Model from our own constructor.

image

In the above code, we have invoked the Backbone.Model constructor by using the apply function on it and the object is properly initialized as evident from console log.

Custom constructor called..
Object is initialized.{"a":3,"b":2}
Object t: {"a":3,"b":2}

So its evident that initialize, defaults etc. are all are invoked from constructor of Backbone.Model. The constructor property completely overrides the Backbone.Model default constructor, so unless we need some very special object creation logic it is advisable not to use this.

Advertisements

JavaScript & DOM Event Handlers

Posted: February 25, 2014 in Javascript
Tags: , ,

During end of last year we faced some serious browser memory leak issues in one of our projects.As we dug deep into the problem we found that event handlers were not detached from the HTML elements properly and somehow these objects were not removed from the memory even when not in use.So the memory consumption was gradually increasing as new HTML elements were added to the DOM after each AJAX call. Finally, we fixed the problem and the standards i.e. do’s and don’ts were updated as usual.This project used jQuery and all the focus went towards how to avoid this in jQuery without delving deep into why this happens in jQuery.I always find this library dependent understanding a very risky proposition particularly in areas where the underlying matter is so simple to understand.

The most simple way to attach an event with a HTML element is as shown below:

evt1

The basic problem with this approach is mixing of HTML & javascript code going against the concept “unobtrusive javascript”. The other way of doing this by assigning a function to the event as shown below:

evt2

This approach solves the problem mentioned above. But both these approaches suffers from the drawback that there is no way to detach the event handler if required.The DOM Level 2 Event model provides the following functions using which it can be achieved:

  • target.addEventListener(type, listener[, useCapture])
    • type – event type
    • listener – function which will be triggered
    • useCapture – true/false indicating whether the event will be captured or not.
  • target.removeEventListener(type, listener[, useCapture])
    • type – event type
    • listener – function which will be triggered
    • useCapture – true/false indicating whether the event will be captured or not.

However in IE 5-10 these functions are named as attachEvent & detachEvent and IE 11 onwards it’s the standard set of functions as mentioned above.

Note, that to remove the handler also we need reference to the handler that we want to remove.Now lets try to develop to wrapper functions in order to add & remove events from any HTML element.

The following function attaches a handler to a HTML element and stores the reference of that handler in a cache.

image

This cache store is used to obtain the reference back when the handler is removed as shown below:

image

So in order attach & detach events we need to call them in pair. Since we need reference of the handler we just can’t use removeEventListener without having that reference.

jQuery follows quite similar coding style, it stores the event handlers in an internal variable $.cache. The reference is added to the cache when we use on/bind function and removed from the cache when we use off/unbind. So it’s always a good practice to use them in pair, otherwise a reference will remain stored in $.cache leading to memory issues.

ASP.NET 4.5 has introduced model binding and strongly typed templates for ASP.NET server controls.This simplifies the way a plain .NET object can be bound as a datasource of a server control like a GridView.Let’s get started off with a simple example of how model binding works.

Read the rest of this entry »

Singleton is the most widely known Design Pattern. Singleton makes sure that one only one instance of a class is created and the same instance is used by other programs and classes.An implementation of a Singleton class is shown below:

Read the rest of this entry »

new Keyword in C#

Posted: July 29, 2012 in .NET, C#
Tags:

The “new” keyword in C# is one of the most commonly known and used keywords in C#.It is used as an operator for instantiating objects of a class as shown below.

Read the rest of this entry »

In the last post we discussed about RValue references in C++11.The next logical step will be to move forward to the forwarding problem.This is related to forwarding or passing arguments from one C++ method to another. Refer to the code snippet below.

Read the rest of this entry »

Rvalue References in C++11

Posted: July 8, 2012 in C++
Tags: , ,

The terms Lvalue & Rvalue has been there since the days of C but still their definition as found in many literature is not very uniform.Before even discussing about the what Rvalue references are in C++11 we need some discussion to get these clarified in the first place.
Read the rest of this entry »