CODEWITHSUNDEEP
backbone.jsbackbone.js-collections
Kevin
Kevin

Reputation: 6691

Setting models while rendering a collection view

I created a collection of users and gave it a URL to fetch the users list from. But when I try to render the whole collection along with the individual model views, the models don't get assigned the value fetched from the collection URL.

// Backbone Collection View
app.UserCollectionView = Backbone.View.extend({
el: '#users-list',

template: _.template($('#connections-template').html()),

initialize: function() {
    this.connections = new app.UserCollection();
    var self = this;
    this.connections.fetch().done(function() {
        self.render();
    });
},

render: function() {
    this.$el.html(this.template());
    // this.$el.append( this.template( this.model.toJSON()));
    this.connections.each(function(user) {


        console.log('User : ' + user.get('name'));  
        // This prints only the default name all the time. (14 times)


        var userView = new app.UserView({
            model: user
        });
        // userView.model.fetch();
        userView.render();
    });
}

});

When render is called, connections.each iterates exactly 14 times (the no. of users in the response JSON), but the attributes of the models are not assigned; it uses the default values only. What am I doing wrong here?

Here is the full content of the file : http://pastebin.com/xD4LyK9N

Update:

This is the JSON response from the server : http://pastebin.com/S4HH1wUD This is the HTML template : http://pastebin.com/v7kfBJ4Y

Upvotes: 0

Views: 42

Answers (1)

Akram Parvez
Akram Parvez

Reputation: 451

Check the data returned in the parse function, it seems to be incorrect or invalid. You can post the console.log output from the parse function, it would help debug the issue. I have bypassed the fetch function and assigned the json data directly and it works fine.

var root = '';
var app = {};

var data = {
    "data": [
        {
            "cities": {
                "current_city": {
                    "colleges_count": 0,
                    "token": 1630,
                    "uid": "thoothukudi",
                    "colleges": [],
                    "name": "Thoothukudi",
                    "state": {
                        "name": "Tamil Nadu",
                        "token": 1033,
                        "uid": "tamil_nadu"
                    }
                },
                "native_city": {
                    "colleges_count": 0,
                    "token": 1630,
                    "uid": "thoothukudi",
                    "colleges": [],
                    "name": "Thoothukudi",
                    "state": {
                        "name": "Tamil Nadu",
                        "token": 1033,
                        "uid": "tamil_nadu"
                    }
                }
            },
            "college": null,
            "sex": null,
            "account_type": "user",
            "token": 1001,
            "about_me": null,
            "confirmation_token": "",
            "name": "Admin",
            "status": "verified",
            "email": "[email protected]",
            "website": null,
            "dob": null,
            "passion": {
                "parent": {
                    "type": "category",
                    "uid": "music"
                },
                "description": null,
                "token": 1002,
                "uid": "singing",
                "name": "Singing",
                "person": "Singer",
                "type": "passion"
            },
            "username": "admin"
        },
        {
            "cities": {
                "current_city": {
                    "colleges_count": 0,
                    "token": 1630,
                    "uid": "thoothukudi",
                    "colleges": [],
                    "name": "Thoothukudi",
                    "state": {
                        "name": "Tamil Nadu",
                        "token": 1033,
                        "uid": "tamil_nadu"
                    }
                },
                "native_city": {
                    "colleges_count": 0,
                    "token": 1630,
                    "uid": "thoothukudi",
                    "colleges": [],
                    "name": "Thoothukudi",
                    "state": {
                        "name": "Tamil Nadu",
                        "token": 1033,
                        "uid": "tamil_nadu"
                    }
                }
            },
            "college": null,
            "sex": null,
            "account_type": "user",
            "token": 1004,
            "about_me": null,
            "confirmation_token": "",
            "name": "Justin Kricket",
            "status": "verified",
            "email": "[email protected]",
            "website": null,
            "dob": null,
            "passion": {
                "parent": {
                    "type": "category",
                    "uid": "music"
                },
                "description": null,
                "token": 1002,
                "uid": "singing",
                "name": "Singing",
                "person": "Singer",
                "type": "passion"
            },
            "username": "justin"
        },
        {
            "cities": {
                "current_city": {
                    "colleges_count": 0,
                    "token": 1630,
                    "uid": "thoothukudi",
                    "colleges": [],
                    "name": "Thoothukudi",
                    "state": {
                        "name": "Tamil Nadu",
                        "token": 1033,
                        "uid": "tamil_nadu"
                    }
                },
                "native_city": {
                    "colleges_count": 0,
                    "token": 1630,
                    "uid": "thoothukudi",
                    "colleges": [],
                    "name": "Thoothukudi",
                    "state": {
                        "name": "Tamil Nadu",
                        "token": 1033,
                        "uid": "tamil_nadu"
                    }
                }
            },
            "college": null,
            "sex": null,
            "account_type": "user",
            "token": 1007,
            "about_me": null,
            "confirmation_token": "",
            "name": "Karti Mako",
            "status": "verified",
            "email": "[email protected]",
            "website": null,
            "dob": null,
            "passion": {
                "parent": {
                    "type": "category",
                    "uid": "music"
                },
                "description": null,
                "token": 1002,
                "uid": "singing",
                "name": "Singing",
                "person": "Singer",
                "type": "passion"
            },
            "username": "karti"
        },
        {
            "cities": {
                "current_city": {
                    "colleges_count": 0,
                    "token": 1630,
                    "uid": "thoothukudi",
                    "colleges": [],
                    "name": "Thoothukudi",
                    "state": {
                        "name": "Tamil Nadu",
                        "token": 1033,
                        "uid": "tamil_nadu"
                    }
                },
                "native_city": {
                    "colleges_count": 0,
                    "token": 1630,
                    "uid": "thoothukudi",
                    "colleges": [],
                    "name": "Thoothukudi",
                    "state": {
                        "name": "Tamil Nadu",
                        "token": 1033,
                        "uid": "tamil_nadu"
                    }
                }
            },
            "college": null,
            "sex": null,
            "account_type": "user",
            "token": 1010,
            "about_me": null,
            "confirmation_token": "",
            "name": "Laurel R K",
            "status": "verified",
            "email": "[email protected]",
            "website": null,
            "dob": null,
            "passion": {
                "parent": {
                    "type": "category",
                    "uid": "music"
                },
                "description": null,
                "token": 1002,
                "uid": "singing",
                "name": "Singing",
                "person": "Singer",
                "type": "passion"
            },
            "username": "laurel"
        },
        {
            "cities": {
                "current_city": {
                    "colleges_count": 0,
                    "token": 1630,
                    "uid": "thoothukudi",
                    "colleges": [],
                    "name": "Thoothukudi",
                    "state": {
                        "name": "Tamil Nadu",
                        "token": 1033,
                        "uid": "tamil_nadu"
                    }
                },
                "native_city": {
                    "colleges_count": 0,
                    "token": 1630,
                    "uid": "thoothukudi",
                    "colleges": [],
                    "name": "Thoothukudi",
                    "state": {
                        "name": "Tamil Nadu",
                        "token": 1033,
                        "uid": "tamil_nadu"
                    }
                }
            },
            "college": null,
            "sex": null,
            "account_type": "user",
            "token": 1013,
            "about_me": null,
            "confirmation_token": "",
            "name": "Rocky Bossy",
            "status": "verified",
            "email": "[email protected]",
            "website": null,
            "dob": null,
            "passion": {
                "parent": {
                    "type": "category",
                    "uid": "music"
                },
                "description": null,
                "token": 1002,
                "uid": "singing",
                "name": "Singing",
                "person": "Singer",
                "type": "passion"
            },
            "username": "rocky"
        },
    ],
    "status": "success",
    "http_status": 200,
    "message": null
}


// Backbone Model
app.UserModel = Backbone.Model.extend({
    defaults: {
        // urlRoot: root + '/users',
        name: 'Default Name',
        email: '30',
        username: 'default_username'
    },

    initialize: function() {
        // this.fetch();
        // console.log('User model \'' + this.id + '\' has been initialized.');
    },
});

// Backbone Model View
app.UserView = Backbone.View.extend({
    el: '#users-list',
    // el: '.user-box-wrapper',

    template: _.template($('#connections-user-template').html()),

    initialize: function() {
        // this.render();
    },

    render: function() {
        this.$el.append( this.template( this.model.toJSON()));
    }
});

// Backbone Collection
app.UserCollection = Backbone.Collection.extend({
    model: app.UserModel,
    url: root ,

    initialize: function() {
    		
        // this.fetch();
    },

    parse: function(d) {
    		console.log(data.data)
        return data.data;
    }
});

// Backbone Collection View
app.UserCollectionView = Backbone.View.extend({
    el: '#users-list',

    template: _.template($('#connections-template').html()),

    initialize: function() {
        this.connections = new app.UserCollection(data.data);
        var self = this;
        self.render();
        //this.connections.fetch().done(function() {
        //    self.render();
        //});
    },

    render: function() {
        this.$el.html(this.template());
        // this.$el.append( this.template( this.model.toJSON()));
        this.connections.each(function(user) {
            console.log('User : ' + user.get('name'));
            var userView = new app.UserView({
                model: user
            });
            // userView.model.fetch();
            userView.render();
        });
    }
});
var connectionsView = new app.UserCollectionView();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<body>

    <header id="top">
      <div id="logo-wrapper">
        <img src="../static/img/logo.png" alt="Logo" id="logo">
      </div>
      <div id="top-links">
        <div id="top-profile-box" class="toplink">
          <div id="top-profile-data-box">
            <div id="top-profile-data-name">Kevin Isaac</div>
            <div id="top-profile-data-passion">Writer</div>
          </div>
          <img id="top-profile-image" src="../static/img/user1.jpg" alt="">
        </div>
        <div id="notification-icon" class="toplink"></div>
        <div id="top-message-icon" class="toplink"></div>
        <div id="logout-icon" class="toplink"></div>
      </div>
    </header>
    <div id="middle">
      <nav id="side-nav">
        <div id="side-nav-top">
          <div class="side-nav-link" id="side-nav-home-link">
            <div class="side-nav-link-img"></div>
            <div class="side-nav-link-title">Home</div>
          </div>
          <div class="side-nav-link" id="side-nav-profile-link">
            <div class="side-nav-link-img"></div>
            <div class="side-nav-link-title">Profile</div>
          </div>
          <div class="side-nav-link" id="side-nav-messages-link">
            <div class="side-nav-link-img"></div>
            <div class="side-nav-link-title">Message</div>
          </div>
          <div class="side-nav-link" id="side-nav-account-link">
            <div class="side-nav-link-img"></div>
            <div class="side-nav-link-title">Account</div>
          </div>
        </div>
      </nav>
      <div id="main-content">
        <!-- Start of page specific HTML -->

        <div id="content-title">
          <div class="content-subtitle">Connections</div>
          <div class="content-subtitle">Followers</div>
          <div class="content-subtitle">Followings</div>
        </div>

        <div id="content-body">
          <div id="users-box">
            <div id="users-list">No connection</div>
              <!-- Backbone Template Starts --> 
              <script type="text/template" id="connections-template"></script>
              <script type="text/template" id="connections-user-template">
                <div class="user-box-wrapper">
                  <div class="user-box">
                    <div class="user-pic-wrapper">
                      <img src="/static/img/user1.jpg" alt="">
                    </div>
                    <div class="user-data" id="boox">
                      <div class="user-name"><%= name %></div>
                      <div class="user-passion"><%= username %></div>
                      <div class="user-city"><%= email %></div>
                    </div>
                  </div>
                </div>
              </script>
              <!-- Backbone Template Ends --> 


            <div id="users-side-box">
              <div id="users-box-search">
                <input id="user-search" type="text" name="">
              </div>
              <div id="user-metadata">
                <div id="metadata-user-top-box">
                  <div id="metadata-user-image-wrapper">
                    <img src="/static/img/user1.jpg" alt="">
                  </div>
                  <div id="metadata-user-name-box">
                    <div id="metadata-name">Name's Bond</div>
                    <div id="metadata-passion">Assassin</div>
                  </div>
                </div>
                <div id="metadata-user-bottom-box">
                  <div class="metadata-user-attribute">
                    <span class="metadata-property">Studied at: </span>
                    <span class="metadata-value">Karunya University </span>
                  </div>
                  <div class="metadata-user-attribute">
                    <span class="metadata-property">Native City: </span>
                    <span class="metadata-value">London</span>
                  </div>
                  <div class="metadata-user-attribute">
                    <span class="metadata-property">Website: </span>
                    <span class="metadata-value">www.007.com</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- End of page specific HTML -->
      </div>
      <aside id="main-aside">
        Aside one two therr
      </aside>
    </div>

    
  </body>

https://jsfiddle.net/akramparvez/a2jvh3mk/

Upvotes: 1

Related Questions