CODEWITHSUNDEEP
javascriptjsonbackbone.js
URL87
URL87

Reputation: 11012

A Simple Example – Backbone.js Tutorial – Collection based on JSON + View

I try this tutorial .

The HTML is (index.html) : 

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="jquery.js"></script>
    <script src="json2.min.js"></script>
    <script src="underscore.js"></script>
    <script src="backbone.js"></script>
    <script>

        $(function () {
            var Profile = Backbone.Model.extend();

            var ProfileList = Backbone.Collection.extend({
                model: Profile,
                url: 'jsonSample.json'
            });

            var ProfileView = Backbone.View.extend({
                el: "#profiles",
                template: _.template($('#profileTemplate').html()),
                render: function (eventName) {
                    _.each(this.model.models, function (profile) {
                        var profileTemplate = this.template(profile.toJSON());
                        $(this.el).append(profileTemplate);
                    }, this);

                    return this;
                }
            });

            var profiles = new ProfileList();
            var profilesView = new ProfileView({ model: profiles });
            profiles.fetch();
            profiles.bind('reset', function () {
                profilesView.render();
            });

        });
    </script>
    <title>Fortified Studio</title>
</head>
<body>
    <div id="profiles"></div>

    <script id="profileTemplate" type="text/template">
        <div class="profile">
            <div class="info">
                <div class="name">
                    <%= name %>
                </div>
                <div class="title">
                    <%= title %>
                </div>
                <div class="background">
                    <%= background %>
                </div>
            </div>
        </div>
    </script>
</body>
</html>

jsonSample.json:

{
    {
        "name" : "AAAA",
        "title" : "BBBB",
        "background" : "CCCC"
    },
    {
        "name" : "DDDD",
        "title" : "EEEE",
        "background" : "FFFF"
    },
    {
        "name" : "GGGG",
        "title" : "HHHH",
        "background" : "IIII"
    }
}

But nothing shown on the browser . What is wrong here ?

Upvotes: 2

Views: 8023

Answers (1)

Gohn67
Gohn67

Reputation: 10638

EDIT 2:

Here is a jsFiddle for a working version: http://jsfiddle.net/8RP89/1/

I would suggest you look for a different tutorial. This one seems really off and I had to make a quite a few changes to get things working. I wouldn't use my example as a template for future code though. I just did enough to make sure it worked.

The one thing I didn't test out was actually loading the JSON file. Not sure how to do that in jsFiddle.

Here is a a quick overview of the changes I made:

First off, I think that the reset event is no longer called on fetch unless you specifically ask for reset to be called on fetch:

profiles.bind('reset', function () {
    profilesView.render();
});

Instead it would be better to listen to an add event in your view during initialization. Example:

initialize: function(){
    this.listenTo(this.collection,"add", this.renderItem);          
},

Now since the add event is called for each item added, you need to add method to render items individually

renderItem: function(profile) {
     var profileTemplate = this.template(profile.toJSON());
     this.$el.append(profileTemplate);        
}

The above doesn't work if you have elements already in the collection, so you'll need to add a render method to handle existing collection elements:

render: function () {
    this.collection.each(function(model){
         var profileTemplate = this.template(model.toJSON());
         this.$el.append(profileTemplate);
    }, this);        
    return this;
},

Now you must call render explicitly after you create your view:

var profilesView = new ProfileView({ collection: profileList });
profilesView.render();

EDIT 1:

You'll probably want to change these two lines to use collection instead of model. By default collection objects can be accessed in Backbone Views using this.collection. The syntax in the tutorial looks completely wrong. I've never seen this.model.models before. Maybe this was an older version of Backbone.

var profilesView = new ProfileView({ collection: profiles });

and this line here:

_.each(this.collection, function (profile) {

The code you have shows:

_.each(this.model.models, function (profile) {

and:

var profilesView = new ProfileView({ model: profiles });

And I'd probably change your json file to use an array:

[
    {
        "id": "p1",
        "name" : "AAAA",
        "title" : "BBBB",
        "background" : "CCCC"
    {
        "id": "p2",
        "name" : "DDDD",
        "title" : "EEEE",
        "background" : "FFFF"
    },
    {
        "id": "p3",
        "name" : "GGGG",
        "title" : "HHHH",
        "background" : "IIII"
    }
]

Upvotes: 4

Related Questions