Backbone.js not rendering JSON - - php

Question

I have to code:
window.TicketCollection = Backbone.Collection.extend({
model:Tickets,
url:"/index.php/tickets/viewJSON"
});
window.TicketsView = Backbone.View.extend({
tagName:'div',
initialize: function () {
this.model.bind("reset", this.render, this);
},
render:function(eventName){
_.each(this.model.models, function(ticket){
$(this.el).append(new TicketListItemView({model:ticket}).render().el);
},this);
return this;
}
});
window.TicketListView = Backbone.View.extend({
tagName: "li",
template:_.template($('#tickets-list-item').html()),
render:function (eventName){
$(this.el).html(this.template(this.model.toJSON));
return this;
}
});
var AppRouter = Backbone.Router.extend({
routes:{
"":"list"
},
list:function(){
window.alert("alright");
this.ticketList = new TicketCollection();
this.ticketLists = this.ticketList.get();
this.ticketListView = new TicketListView({model:this.ticketList});
$("#ticketListHolder").html(this.ticketListView.render().el);
},
});
var app = new AppRouter();
Backbone.history.start();
});
My php is as follows:
<?php header('Content-type: application/json');
echo json_encode(array("ticketID"=>"test", "ticketName"=>"1"));?>
The response from the php is:
[{"ticketID":"1","ticketName":"Fix the admin system"}]
HTML:
<div id="ticketListHolder">
#
</div>
<script type="text/template" id="tickets-list-item">
<div class="supTicket ticketHolder nobg">
<div class="issueType">
<span class="issueInfo"><%= ticketName %></span>
<span class="issueNum">[ #<%= ticketID %>] - <%= fullName %></span>
</div>
</div>
</script>
I get the error: Uncaught ReferenceError: ticketName is not defined, it appears that it's not parsing the json, instead reading it as one string block. Why is this error occuring, when my JSON is returning the correct data.

Answer 1

You don't use collection.fetch anywhere. Your router probably should look like this
var AppRouter = Backbone.Router.extend({
routes:{
"":"list"
},
list:function(){
window.alert("alright");
this.ticketList = new TicketCollection();
this.ticketListView = new TicketListView({
model:this.ticketList,
el:$("#ticketListHolder") // I directly assigned #ticketListHolder as the el
});
this.ticketList.fetch();
},
});
And a Fiddle with a mostly working version of your code http://jsfiddle.net/Cc9Ad/2/
Some points you should check:
your ListView and your ItemView were the other way round,
as Daniel Aranda said in his answer, try to use collections and models for their intended purpose,
this.model.toJSON should have been this.model.toJSON()
set defaults on your models, fullName is not defined and would break the templating engine if used in this state
The revised code
window.Tickets=Backbone.Model.extend({
defaults: {
fullName :"No full name"
}
});
window.TicketCollection = Backbone.Collection.extend({
model:Tickets,
url:"/index.php/tickets/viewJSON"
});
window.TicketsView = Backbone.View.extend({
tagName:'li',
template:_.template($('#tickets-list-item').html()),
initialize: function () {
},
render:function(eventName){
console.log
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
window.TicketListView = Backbone.View.extend({
initialize: function () {
this.collection.bind("reset", this.render, this);
},
render:function (){
this.collection.each( function(ticket){
$(this.el).append(new TicketsView({model:ticket}).render().el);
},this);
return this;
}
});
var ticketList = new TicketCollection();
var ticketListView = new TicketListView({
collection:ticketList,
el:$("#ticketListHolder")
});
// ticketList.fetch();
ticketList.reset([
{"ticketID":"1","ticketName":"Fix the admin system"},
{"ticketID":"2","ticketName":"The ticket 2"}
]);

Answer 2

Model is not the same than collection.
You are trying to use a Collection as a Model.
Check this example:
http://danielarandaochoa.com/backboneexamples/blog/2012/02/22/real-world-usage-of-a-backbone-collection/
Also to fix your specific issue, pass to your template an object instead of a Backbone.Model
$(this.el).html(this.template(this.model.toJSON()));
You was missing the parenthesis.
But as I said, I recommend you to read the article explaining how to use the collections.

Answer 3

I use JSON.parse() function to parse the data sent by the PHP.
var a = $.ajax({
url:"/index.php/tickets/viewJSON",
async:false,
cache:false
}).responseText;
jsonData = JSON.parse(a);
then use _.each to loop jsonData then push each data to your model.