Im new to Backbone (dont hate me) but am pulling my hair out trying to do a very simple thing.

Im loading a json file (correctly as I can see it loading in firebug) and I just want to pull some info from it purely for testing (as its my first backbone code)

However, I cant get this working and end up with one blank li tag (code below)

```
<ul id="phones"></ul>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js"></script>

<script id="foo" type="text/template">
        <li><%= name %></li>
    </script>

<script>

    var Phones = Backbone.Collection.extend({
        url:'http://backbone.local/phones/phones.json'
    })
    var PhonesView = Backbone.View.extend({
        el:'#phones',
        initialize:function(){
            this.collection = new Phones();
            this.collection.fetch();
            this.render();
        },
        template:_.template($('#foo').html()),
        render:function(){
                    var foo = this.collection.toJSON();
            $(this.el).html(this.template(foo));
            return this;
        }
    })
    var phonesView = new PhonesView();
</script>

```

Any pointers greatly appreciated.

Cheers,

**UPDATE 1**

I thought it may be due to fetch being async so i called render in success callback of fetch as below. The console.log fires fine but still no json data in rendered html (i also changed to using handlebars)

```
       <script>
        var Phones = Backbone.Collection.extend({
            url:'http://backbone.local/phones/phones.json'
        })
        var PhonesView = Backbone.View.extend({
            el:'#phones',
            initialize:function(){
                var self = this;
                this.collection = new Phones();
                this.collection.fetch({
                    success:function(){
                        console.log('json loaded');
                        self.render();
                    }
                });
            },
            template: Handlebars.compile('<li>sdsadsadsadsad {{name}} dsfcdfd</li>'),
            render:function(){
                var foo = this.collection.toJSON();
                $(this.el).html(this.template(foo));
                return this;
            }
        })
        var phonesView = new PhonesView();
    </script>

```