how to get data from server in backbone

Question

I am creating an app in backbone. This current code works but now I want to get the data from the server. My method at /myfriends/getData returns a json of friends name and etc. How can I make this code to get that json from the server. I read up a little and they are using routes etc…I just need to use it on one page of my app so I do not want to do a lot of routing etc

thanks

$(function() {



FriendList = Backbone.Collection.extend({
    initialize: function(){
        this.bind("add", function( model ){
            alert("hey");
            view.render( model );
        })
    }
});

FriendView = Backbone.View.extend({

    tagName: 'li',

    events: {
        'click #add-input':  'getFriend',
    },

    initialize: function() {
        this.friendslist = new FriendList;
        _.bindAll(this, 'render');
    }, 

    getFriend: function() {
        var friend_name = $('#input').val();
        this.friendslist.add( {name: friend_name} );
    },

    render: function( model ) {
        $("#friends-list").append("<li>"+ model.get("name")+"</li>");
        console.log('rendered')
    },

});

var view = new FriendView({el: 'body'});
});

here is a working copy

http://jsfiddle.net/thomas/Yqk5A/

thanks

TIRED

this is what I have to show the data and tried after the suggestion and still no luck

$(function() {



FriendList = Backbone.Collection.extend({
    initialize: function(){
        this.bind("add", function( model ){
            alert("hey");
            view.render( model );
        })
    }
});

FriendsServer = new Backbone.Collection({

        initialize: function(){
            url : '/friends/Data',
            this.bind("test", function( model ){
                view.render( model );
            })
        }
});



FriendView = Backbone.View.extend({

    tagName: 'li',

    events: {
        'click #add-input':  'getFriend',
    },

    initialize: function() {
        this.friendslist = new FriendList;
        _.bindAll(this, 'render');
    }, 

    getFriend: function() {
        var friend_name = $('#input').val();
        this.friendslist.add( {name: friend_name} );
    },

    render: function( model ) {
        $("#friends-list").append("<li>"+ model.get("name")+"</li>");
        console.log('rendered')
    },

});



FriendsServerView = Backbone.View.extend({

        tagName: 'div',

        render: function( model ){
            $("#jsonData").html(FriendServer.fetch);
        }

    });

var view = new FriendView({el: 'body'});
var view = new FriendsServerView({el: 'body'});
});

in my html I have a div to populate with json data

Answer 1

You just set the url property of your collection and call .fetch() on your collection to load the data from your server. More info at:

http://backbonejs.org/#Collection-fetch

Also, I would bind your model/collection events to your view, not to the model/collection.