title: how to get data from server in backbone
body: <p>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</p>
  
  <p>thanks</p>
  
  <pre><code>$(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("&lt;li&gt;"+ model.get("name")+"&lt;/li&gt;");
          console.log('rendered')
      },
  
  });
  
  var view = new FriendView({el: 'body'});
  });
  </code></pre>
  
  <p>here is a working copy</p>
  
  <p><a href="http://jsfiddle.net/thomas/Yqk5A/" rel="nofollow">http://jsfiddle.net/thomas/Yqk5A/</a></p>
  
  <p>thanks</p>
  
  <p><strong>TIRED</strong></p>
  
  <p>this is what I have to show the data and tried after the suggestion and still no luck</p>
  
  <pre><code>$(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("&lt;li&gt;"+ model.get("name")+"&lt;/li&gt;");
          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
  </code></pre>