Databases
StackOverflow2013
Postsdbo
POHow can I pass a backbone.js collection to a view and iterate over the collection, then render the view?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I pass a backbone.js collection to a view and iterate over the collection, then render the view?
    text
    copied!<p>In the past, what I've been doing is when I want to render and display a collection with a template is just call the "each" method on the collection. And for each model, I make a new single view for each model and append it to the $el. But In this case this won't work. I have an input type text that is in my template and I don't want to display a new input for each model. I would rather somehow pass the collection to the template and iterate over the collection in the template. Also worth noting is that my collection is passed in through my main app view when in create a new instance of this view:</p> <pre><code>// clientsview.js define( [ 'backbone', 'ClientView', 'Clients' ], function(Backbone, ClientView, Clients) { ClientsView = Backbone.View.extend({ tagName: '#page', template: _.template( $('#allClientsTemplate').html() ), initialize: function() { this.render(); }, render: function() { // var that = this; console.log('collection'); console.log(this.collection);// successfully returns collection console.log('template'); console.log(this.template);// successfully returns template function // This causes an error: //Uncaught TypeError: Cannot call method 'toJSON' of undefined var tmpl = this.template({ clients: this.collection.toJSON() }); return this; } }); return ClientsView; }); </code></pre> <p>my template in index.html</p> <pre><code>// index.html &lt;script id="allClientsTemplate" type="text/template"&gt; // I do not want create an input for every single model // but I need the input to be part of the view. &lt;input type="text" class="table-search" id="search" autocomplete="off" placeholder="Search Clients…"&gt; &lt;table class="table" id="tblData"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;First Name&lt;/th&gt; &lt;th&gt;Last Name&lt;/th&gt; &lt;th&gt;Status&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody id="tblDataBody"&gt; &lt;% _.each(clients, function(client) { %&gt; &lt;tr&gt; &lt;td&gt;&lt;a href=""&gt;&lt;%- client.first_name %&gt;&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a href=""&gt;&lt;%- client.last_name %&gt;&lt;/a&gt;&lt;/td&gt; &lt;td&gt;&lt;a href=""&gt;&lt;%- client.status %&gt;&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;% }); %&gt; &lt;/tbody&gt; &lt;/script&gt; </code></pre> <p>I'm instantiating my clients view from within my main app view:</p> <pre><code>define( [ 'jquery', 'underscore', 'backbone', 'AddClientView', 'ClientsView', ], function( $, _, Backbone, AddClientView, ClientsView ) { AppView = Backbone.View.extend({ initialize: function() { // var addClientView = new AddClientView({ collection: this.collection }); var clientsView = new ClientsView({ collection:this.collection }); } }); return AppView; }); </code></pre> <p>And I'm instantiating my main app view from my initialize method:</p> <pre><code>define('App', [ 'jquery', 'underscore', 'backbone', 'Router', 'bootstrap', 'Clients', 'AppView' ], function($, _, Backbone, Router, bootstrap, Clients, AppView) { function initialize() { // for custom global events window.vent = _.extend( {}, Backbone.Events ) var app = new Router(); Backbone.history.start(); // probably more appropriate to do this in app view var clients = new Clients;// Get collection of clients clients.fetch().then( function() {// fetch client collection from db new AppView({ collection: clients }); }); } return { initialize: initialize }; }); </code></pre> <p>My initialize method is being called from main.js:</p> <pre><code>// main.js require.config({ shim: { 'underscore': { exports: '_' }, 'backbone': { deps: ['underscore', 'jquery'], exports: 'Backbone' }, 'bootstrap': { deps: ['jquery'], exports: 'bootstrap' } }, paths: { 'text' : 'lib/require/text', 'jquery' : 'lib/jquery/jquery-1.9.1', 'underscore' : 'lib/underscore/underscore', 'backbone' : 'lib/backbone/backbone', 'bootstrap' : 'lib/bootstrap/bootstrap', 'App' : 'app', 'Router' : 'router', 'AppView' : 'views/app/appview', 'Client' : 'models/clients/client', 'Clients' : 'collections/clients/clients', 'ClientView' : 'views/clients/clientview', 'ClientsView' : 'views/clients/clientsview', 'AddClientView' : 'views/clients/addclientview' } }); require(['App'], function(App) { App.initialize(); }); </code></pre> <p>I'm getting an error when I try this approach (Uncaught TypeError: Cannot call method 'toJSON' of undefined). How can I make this work?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload