serving the solutions day and night

Pages

Monday, July 25, 2016

Backbone.js

http://backbonejs.org/

Models, Views & Collections












var Books = Backbone.Collection.extend({
  url: '/books'
});

Methods:
GET  /books/ .... collection.fetch();
POST /books/ .... collection.create();
GET  /books/1 ... model.fetch();
PUT  /books/1 ... model.save();
DEL  /books/1 ... model.destroy();



Example
{
  "page": 1,
  "limit": 10,
  "total": 2,
  "books": [
    {"id": 1, "title": "Pride and Prejudice"},
    {"id": 4, "title": "The Great Gatsby"}
  ]
}

var Books = Backbone.Collection.extend({
  url: '/books',
  parse: function(data) {
    return data.books;
  }
});


Routing with URLs
     








The Router detects changes to the URL. Pressing the "Back" button, and it will tell your application exactly where you are now.

Simple backbone appDeveloping Backbone.js Applications

Model.set()

var Todo = Backbone.Model.extend({
  // Default todo attribute values
  defaults: {
    title: '',
    completed: false
  }
});

// Setting the value of attributes via instantiation
var myTodo = new Todo({
  title: "Set through instantiation."
});

// Set single attribute value at a time through Model.set():
myTodo.set("title", "Title attribute set through Model.set().");

// Set map of attributes through Model.set():
myTodo.set({
  title: "Both attributes set through Model.set().",
  completed: true
});

What is el? - The central property of a view is el.

What is el and how is it defined?

el is basically a reference to a DOM element and all views must have one. Views can use el to compose their element’s content and then insert it into the DOM all at once, which makes for faster rendering because the browser performs the minimum required number of reflows and repaints.

If you want to create a new element for your view, set any combination of the following properties on the view: tagName, id, and className.

Example creates a ul element with id and class attributes:

var TodosView = Backbone.View.extend({
  tagName: 'ul', // required, but defaults to 'div' if not set
  className: 'container', //optional
  id: 'todos' // optional
});

var todosView = new TodosView();
console.log(todosView.el); // logs <ul id="todos" class="container"></ul>

eland() - The view.$el property is equivalent to $(view.el) and view.$(selector) is equivalent to $(view.el).find(selector).

Collections - Collections are sets of Models and are created by extending Backbone.Collection.

Adding and Removing Models
var Todo = Backbone.Model.extend({
  defaults: {
    title: '',
    completed: false
  }
});

var TodosCollection = Backbone.Collection.extend({
  model: Todo
});

var a = new Todo({ title: 'Jamaica.'}),
    b = new Todo({ title: 'China.'}),
    c = new Todo({ title: 'Disneyland.'});

var todos = new TodosCollection([a,b]); // todos.length = > 2

todos.add(c); // todos.length = > 3

todos.remove([a,b]); // todos.length = > 1

todos.remove(c); // todos.length = > 0

Retrieving Models
var myTodo = new Todo({title:'Read the whole book', id: 2});

// pass array of models on collection instantiation
var todos = new TodosCollection([myTodo]);

var todo2 = todos.get(2);

// Models, as objects, are passed by reference
console.log(todo2 === myTodo); // true

var todo3 = todos.get(3); //undefined

Underscore.js utility functions
forEach: iterate over collections
todos.forEach(function(model){
  console.log(model.get('title'));
});

sortBy(): sort a collection on a specific attribute
var sortedByAlphabet = todos.sortBy(function (todo) {
    return todo.get("title").toLowerCase();
});

map(): iterate through a collection, mapping each value through a transformation function
var count = 1;
console.log(todos.map(function(model){
  return count++ + ". " + model.get('title');
}));

pluck(): extract a specific attribute
var names = collection.pluck('title'); // ['Belgium', 'China', 'Austria']

filter(): filter a collection
var Todos = Backbone.Collection.extend({
  model: Todo,
  filterById: function(ids){
    return this.filter(
      function(c) {
        return _.contains(ids, c.id);
      })
  }
});

groupBy(): group a collection into groups of like items
// create groups of completed and incomplete models
var byCompleted = todos.groupBy('completed');
var completed = new Backbone.Collection(byCompleted[true]);
console.log(completed.pluck('title')); //["Austria."]

pick(): extract a set of attributes from a model
var todo = new Todo({title: 'Austria.'}); // todo.pick('title') => {title: "Austria"}

omit(): extract all attributes from a model except those listed
console.log(todo.omit('title')) // {completed: false}

keys() and values(): get lists of attribute names and values
todo.keys() => ["title", "completed"]
todo.values() =>  ["Austria.", false]

pairs(): get list of attributes as [key, value] pairs
var pairs = todo.pairs();
pairs[0] => ["title", "Austria."]
pairs[1] = > ["completed", false]

invert(): create object in which the values are keys and the attributes are values
todo.invert()) = > {'go to Austria.': 'title', 'false': 'completed'}

Chainable API

var collection = new Backbone.Collection([
  { name: 'Tim', age: 5 },
  { name: 'Ida', age: 26 },
  { name: 'Rob', age: 55 }
]);

var filteredNames = collection.chain() // start chain, returns wrapper around collection's models
  .filter(function(item) { return item.get('age') > 10; }) // returns wrapped array excluding Tim
  .map(function(item) { return item.get('name'); }) // returns wrapped array containing remaining names
  .value(); // terminates the chain and returns the resulting array

console.log(filteredNames); // logs: ['Ida', 'Rob']

RESTful Persistence
Saving models to the server
var TodosCollection = Backbone.Collection.extend({
  model: Todo,
  url: '/todos'
});

var todos = new TodosCollection();
todos.fetch();

var todo2 = todos.get(2);
todo2.set('title', 'fishing');
todo2.save(); // sends HTTP PUT to /todos/2

todos.create({title: 'Try out code samples'}); // sends HTTP POST to /todos and adds to collection

A model’s validate() method is called automatically by save() and will trigger an invalid event on the model if validation fails.

Deleting models from the server
var todo2 = todos.get(2);
todo2.destroy(); // sends HTTP DELETE to /todos/2 and removes from collection

//Calling destroy on a Model will return false if the model isNew:
var todo = new Backbone.Model();
console.log(todo.destroy()); // false

Routers
http://example.com/#about
http://example.com/#search/seasonal-horns/page2

var TodoRouter = Backbone.Router.extend({
    /* define the route and function maps for this router */
    routes: {
        "about" : "showAbout",
        /* Sample usage: http://example.com/#about */

        "todo/:id" : "getTodo",
        /* This is an example of using a ":param" variable which allows us to match
        any of the components between two URL slashes */
        /* Sample usage: http://example.com/#todo/5 */

        "search/:query" : "searchTodos",
        /* We can also define multiple routes that are bound to the same map function,
        in this case searchTodos(). Note below how we're optionally passing in a
        reference to a page number if one is supplied */
        /* Sample usage: http://example.com/#search/job */

        "search/:query/p:page" : "searchTodos",
        /* As we can see, URLs may contain as many ":param"s as we wish */
        /* Sample usage: http://example.com/#search/job/p1 */

        "todos/:id/download/*documentPath" : "downloadDocument",
        /* This is an example of using a *splat. Splats are able to match any number of
        URL components and can be combined with ":param"s*/
        /* Sample usage: http://example.com/#todos/5/download/files/Meeting_schedule.doc */

        /* If you wish to use splats for anything beyond default routing, it's probably a good
        idea to leave them at the end of a URL otherwise you may need to apply regular
        expression parsing on your fragment */

        "*other"    : "defaultRoute", // http://example.com/# <anything>

        "optional(/:item)": "optionalItem",
        "named/optional/(y:z)": "namedOptionalItem"
        /* Router URLs also support optional parts via parentheses, without having
           to use a regex.  */
    },

    showAbout: function(){
    },

    getTodo: function(id){
    },

    searchTodos: function(query, page){
    },

    downloadDocument: function(id, path){
    },

    defaultRoute: function(other){
        console.log('Invalid. You attempted to reach:' + other);
    }
});

new TodoRouter();

Backbone.history - This will automatically handle routes that have been defined and trigger callbacks when they’ve been accessed.
var TodoRouter = Backbone.Router.extend({
  /* define the route and function maps for this router */
  routes: {
    "about" : "showAbout",
    "search/:query" : "searchTodos",
    "search/:query/p:page" : "searchTodos"
  },

  showAbout: function(){},

  searchTodos: function(query, page){
    var page_number = page || 1;
    console.log("Page number: " + page_number + " of the results for todos containing the word: " + query);
  }
});

var myTodoRouter = new TodoRouter();

Backbone.history.start();

// http://localhost/#search/job/p3   logs: Page number: 3 of the results for todos containing the word: job
// http://localhost/#search/job      logs: Page number: 1 of the results for todos containing the word: job
// etc.

Backbone’s Sync API
Backbone.emulateHTTP = false; // set to true if server cannot handle HTTP PUT or HTTP DELETE
Backbone.emulateJSON = false; // set to true if server cannot handle application/json requests

Backbone.sync
Backbone.sync = function(method, model, options) {
};
var methodMap = {
  'create': 'POST',
  'update': 'PUT',
  'patch':  'PATCH',
  'delete': 'DELETE',
  'read':   'GET'
};

The sync method is called with three parameters:
method: One of create, update, patch, delete, or read
model: The Backbone model object
options: May include success and error methods
Implementing a new sync method can use the following pattern:

Backbone.sync = function(method, model, options) {

  function success(result) {
    // Handle successful results from MyAPI
    if (options.success) {
      options.success(result);
    }
  }

  function error(result) {
    // Handle error results from MyAPI
    if (options.error) {
      options.error(result);
    }
  }

  options || (options = {});

  switch (method) {
    case 'create':
      return MyAPI.create(model, success, error);

    case 'update':
      return MyAPI.update(model, success, error);

    case 'patch':
      return MyAPI.patch(model, success, error);

    case 'delete':
      return MyAPI.destroy(model, success, error);

    case 'read':
      if (model.cid) {
        return MyAPI.find(model, success, error);
      } else {
        return MyAPI.findAll(model, success, error);
      }
  }
};

Nutritionix Health Tracker Project
Develop a single page app that tracks the user's calorie intake, and optionally, other health-related metrics. Typing food names into the search field will display a list of matching foods as provided by the health API. Users will be able to select an item from the list, and the item will be added to the list of foods the user is tracking. The total calorie count will also update to reflect the new daily total.

https://developer.nutritionix.com/docs/v1_1

Project Code

15 comments:

Sathya G said...


thank you for sharing such a nice and interesting blog with us. hope it might be much useful for us. keep on updating...
ROI Services in Chennai

Sowmiya said...


The given information was very excellent & Great tips, and awesome way to get exert tips from everyone,not only i like that post all peoples like that post,because of all given information was wonderful



Digital Marketing services in Chennai

Abiya Carol said...

This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.I like it and help me to development very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.

PPC Services in Chennai

Aasha said...

Here i had read the content you had posted. It is much interesting so please keep update like this.

Digital Marketing For Small Business in Chennai

Sowmiya said...

ya it is really i had a fun and auspicious time by reading your blog thus it makes me to be proud to get many more credentials. thus i had a good time with your blog it attracts me with large types of collections.

Best Informatica Training Institute in Chennai

Sathya G said...

The blog was very awesome!! Thank you for sharing the article with us. please keep on updating more useful informations...
Hadoop Training in chennai

Shalini said...

I just see the post i am so happy the post of information's.So I have really enjoyed and reading your blogs for these posts.Any way I’ll be subscribing to your feed and I hope you post again soon.

digital marketing company in chennai
seo company in chennai

Pricilla Prasanth said...

wow amazing post.The key points you mentioned here related to maintenance of car is really awesome.Checking all fluid levels,changing oil and of course the regular service of the car which is necessary to maintain our vehicle.Thank you for the information.

home spa services in mumbai

Hammed said...

thank u for search a nice and good blog share..the key points are really nice.i hope you to post the data again......



digital marketing company in india

Jeffy said...

hank you for sharing such a nice and interesting blog with us. Hope it might be much useful for us. keep on updating...!!
seo company in india
digital marketing company in india
seo company in chennai
digital marketing company in chennai

Shalini said...

Superb. I really enjoyed very much with this article here. Really it is an amazing article I had ever read. I hope it will help a lot for all. Thank you so much for this amazing posts and please keep update like this excellent article.thank you for sharing such a great blog with us. expecting for your.
seo company in india

Shalini said...

Superb. I really enjoyed very much with this article here. Really it is an amazing article I had ever read. I hope it will help a lot for all. Thank you so much for this amazing posts and please keep update like this excellent article.thank you for sharing such a great blog with us. expecting for your.

seo company in india

Akshaysri said...

Very nice post here and thanks for it .I always like and such a super contents of these post.Excellent and very cool idea and great content of different kinds of the valuable information's.
Sat Coaching Chennai

Thamizharasi J said...

Very nice post here and thanks for latest smartphone applications it .I always like and such a super colors of phone for these post.Excellent and very cool idea and great models and different kinds of the more information's.

Fresher Jobs in Mumbai
Fresher Jobs in Pune
Fresher Jobs in Noida
Fresher Jobs in Hyderabad

Lunameadow said...

This is extremely great information for these blog!! And Very good work. It is very interesting to learn from to easy understood. Thank you for giving information. Please let us know and more information get post to link.

Oracle Training in Chennai