Backbone.js的不渲染JSON -

Question

我不得不代码：

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

我的PHP如下：

<?php header('Content-type: application/json'); 
echo json_encode(array("ticketID"=>"test", "ticketName"=>"1"));?> 

从PHP的反应是：

[{"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> 

我得到的错误：Uncaught ReferenceError: ticketName is not defined，它似乎不是解析json，而是将它读为一个字符串块。为什么这个错误发生，当我的JSON返回正确的数据。

Answer 1

您不要在任何地方使用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控件是倒过来，
• 丹尼尔阿兰达说，他的回答，尽量使用集合和模型为他们的预期目的，
• this.model.toJSON应该已经this.model.toJSON（）
01您的模型个
• 默认设置，全名是没有定义，如果在这种状态下

修改后的代码

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

我使用JSON.parse（）函数来解析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. 

Answer 3

型号不超过集合一样使用会破坏模板引擎。

您正在尝试使用Collection作为模型。

检查这个例子： 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())); 

你缺少括号。

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