php - Backbone.js not rendering JSON -

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.

score 1 · Accepted Answer

你不使用collection.fetch任何地方。你的路由器可能应该是这样的

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();
    },
});

还有一个小提琴，其中包含您的代码http://jsfiddle.net/Cc9Ad/2/的大部分工作版本，您应该检查一些要点：

你的 ListView 和你的 ItemView 是相反的，
正如 Daniel Aranda 在他的回答中所说，尝试将系列和模型用于其预期目的，
this.model.toJSON 应该是 this.model.toJSON()
在您的模型上设置默认值，fullName 未定义，如果在此状态下使用会破坏模板引擎

修改后的代码

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

score 1 · Accepted Answer

模型与集合不同。

您正在尝试将集合用作模型。

检查这个例子： http ://danielarandaochoa.com/backboneexamples/blog/2012/02/22/real-world-usage-of-a-backbone-collection/

另外要解决您的特定问题，请将对象而不是 Backbone.Model 传递给您的模板

 $(this.el).html(this.template(this.model.toJSON()));

你错过了括号。

但正如我所说，我建议您阅读解释如何使用集合的文章。

score 0 · Accepted Answer

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.

php - Backbone.js not rendering JSON -

3 回答 3

Related

Reference