1. дома
  2. Вопрос и ответ
  3. Настройка моделей при рендеринге вида коллекции

Настройка моделей при рендеринге вида коллекции

2016-02-17 2 views
0

Создал коллекцию пользователей и дал ей URL-адрес для извлечения списка пользователей. Но когда я пытаюсь отобразить всю коллекцию вместе с отдельными представлениями модели, модели не получают назначенное значение из 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(); 
    }); 
}

});

Когда рендер вызывается, connections.each выполняет итерацию ровно 14 раз (количество пользователей в ответе JSON), но атрибуты моделей не назначены; он использует только значения по умолчанию. Что я здесь делаю неправильно?

Вот полное содержание файла: http://pastebin.com/xD4LyK9N

Update:

Это ответ JSON с сервера: http://pastebin.com/S4HH1wUD Это шаблон HTML: http://pastebin.com/v7kfBJ4Y

источник

2016-02-17 Kevin

+0

Что вы шаблон выглядеть, и JSON-ответ? Это было бы интересно посмотреть. – Tholle

+0

@Tholle Я обновил вопрос, добавив ссылки на ответ JSON и шаблон. – Kevin

ответ

1

Проверьте данные, возвращенные в функции синтаксического анализа, являются некорректными или неверными. Вы можете опубликовать вывод console.log из функции синтаксического анализа, это поможет отладить проблему. Я обошел функцию выборки и напрямую назначил данные json, и он отлично работает.

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() { 
 
    \t \t 
 
     // this.fetch(); 
 
    }, 
 

 
    parse: function(d) { 
 
    \t \t 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/

источник

2016-02-17 20:07:08

+0

'console.log (data)' печатает массив из 14 пользовательских объектов, извлеченных с сервера, как и ожидалось. И вы имеете в виду функцию 'parse' модели' UserCollection'? Я не вижу, какую ошибку я сделал там. – Kevin

+0

Сработала функция 'parse' из' UserModel'. Проблема с пустой функцией разбора была проблемой, которую мы упустили. Пожалуйста, обновите ответ, чтобы я мог его принять. – Kevin

+0

Ответ отредактирован –

Смежные вопросы

 Смежные вопросы