Question

I am very new to backbone.js, to try it out I made a function to append an element using my array. But I don’t know how to fetch the same from server or my local path.

I tried with some tutorial but still I couldn’t get any good result. Can any one correct my function to fetch the data from local folder or server?

code :

this is my local path: '..data/data.json'

(function($){ 
  var student = [
    {name:'student1'},
    {name:'student2'},
    {name:'student3'}
  ]

var model = Backbone.Model.extend({
  defaults:{
    name:'default name'  
  }
});

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

var itemViews = Backbone.View.extend({
  tagname:'li',
  render:function(){
    this.$el.html(this.model.get('name'));
    return this;
  }  
})

var view = Backbone.View.extend({
  el: $("#contacts"),
  initialize:function(){
    this.collection = new collection(student);
    this.render();
  },
  render:function(){
    var that = this;
    _.each(this.collection.models, function(item){
      that.renderName(item);
    })
  },
  renderName:function(item){
    var itemView = new itemViews({model:item});
    this.$el.append(itemView.render().el);
  }
});

Answer 1

Collections have the url property which links to the url where the models can be fetched (in a proper JSON format of course).

If you have a RESTful API you can tie them directly to a collection on your backend.

In your case you can modify the collection definition as follows

var collection = Backbone.Collection.extend({
  model:model,
  url: '..data/data.json' //OR WHATEVER THE URL IS 
});

Then when instantiating your collection you have to call the fetch() method to fill in the collection.

   myCollection = new collection();
   myCollection.fetch();

For more information see this post