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"}
]);