BackboneJS - Fetch data from PHP file and display in View

Question

I'm fetching some data from my MySQL database with a php file and now I want to display this data in my View by passing it through a Model with the json_encode method. So far I created a Router, a Model, a Collection (is it necessary?) and a View. When i console.log the collection in my View, I can see that the data is actually there but my View shows nothing. When i console.log the Model I get the "undefined" message. So it seems that the Model is not instantiated, but I dont really know how to solve it. I use RequireJS and the HandlebarsJS for HTML templating purpose.

So here is my Router.

define(['backbone',
       'views/firstpage',
       'views/secondpage',
       'views/thirdpage',
       'collections/BandCollection']),
function( Backbone,FirstpageView, SecondpageView, ThirdpageView,BandCollection ) {
   var Router = Backbone.Router.extend({
        routes: {
            '': 'index',
            'firstpage' : 'firstpage',
            'secondpage' : 'secondpage',
            'thirdpage' : 'thirdpage'
          },
        initialize: function () {
           this.bandCollection = new BandCollection();

           this.bandCollection.fetch({
              error: function () {
              console.log("error!!"); 
            },
            success: function (collection) {
            console.log("no error"); 
          }
   });
},

        thirdpage: function() {
            var thirdpageView = new ThirdpageView({ el:'#topContent', collection:this.bandCollection}).render();

        },

    });

    return Router;
    }
 );

My Model looks like this:

define([
"jquery",
"backbone"
],

function($, Backbone) {
var BandModel = Backbone.Model.extend({
    url: "../metal/db/bands.php",

    defaults: {
        "id": '',
        "band": '',
        "label": ''
    }
});

return BandModel;
});

My Collection:

define([
"backbone",
"models/BandModel"
],

function(Backbone, BandModel) {
var BandCollection = Backbone.Collection.extend({
    model: BandModel,
    url: "../metal/db/bands.php"
});

return BandCollection;
});

My HTML template:

<div>
   <p><%= id %></p>
   <p><%= band %></p>
   <p><%= label %></p>
</div>

And My View looks like this:

define(['backbone','handlebars', 'text!templates/Thirdpage.html'],

    function(Backbone,Handlebars, Template) {


        'use strict';

        var ThirdpageView = Backbone.View.extend({

            template: Handlebars.compile(Template),

            initialize: function () {
                _.bindAll(this, 'render');
                this.render();
            },

            render: function() {
                console.log(this.collection);
                this.$el.html(this.template(this.collection.toJSON()));
                return this;
            }

        });

        return ThirdpageView;

    }
);

As said before, the console.log(this.collection) tells me that the data is available..

{length: 6, models: Array[6], _byId: Object, constructor: function, model: function…}

but console.log(this.model) gives me "undefined" - and the View actually displays the HTML mentioned before and not the data, meaning it actually shows

<div>
<p><%= id %></p>
<p><%= band %></p>
<p><%= label %></p>
</div>

So, can anyone help me out? I'm out of ideas...

You are using Handlebars. Shouldn't your template be using {{}} instead of <%= %>? — Sandeep Nayak
– Sandeep Nayak, Commented Jan 9, 2014 at 11:24
Try my answer below. We use <%= %> if we are using underscore.js to compile our templates. — Sandeep Nayak
– Sandeep Nayak, Commented Jan 9, 2014 at 11:47

Sandeep Nayak · Accepted Answer · 2014-01-09 17:30:55Z

2

Change your render() method in your view like this:

render: function() {
   var self = this;
   console.log(this.collection);
   self.collection.each(function(model){
        console.log(this.model);  // can view all models here
        self.$el.append(self.template({id:model.get('id'),band:model.get('band'),label:model.get('label')}));
   });

   return this;
}

Change your Template like this:

<div>
  <p>{{id}}</p>
  <p>{{band}}</p>
  <p>{{label}}></p>
</div>

edited Jan 9, 2014 at 17:30

answered Jan 9, 2014 at 11:42

Sandeep Nayak

4,7571 gold badge26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SHT Over a year ago

Hmm, this gives me 2 errors: "Unexpected token :" on the view and "undefined is not a function" on my router, it refers to the "var thirdpageView = new ThirdpageView..."-line

SHT Over a year ago

OK i solved it! There was just a syntax error in your submitted answer: self.$el.append(self.template({id:model.get('id'),band:model.get('band'),label:model.get('label')})); - Thanks alot!!!

Sandeep Nayak Over a year ago

@SHT: oh Yes, edited my answer. Overlooked it while typing. Glad you could find it. Thanks!

Collectives™ on Stack Overflow

BackboneJS - Fetch data from PHP file and display in View

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related