2013-02-21 112 views
4

我正在研究日曆風格的骨幹應用程序,但對它來說相當新穎。我一直在這上面用了12個多小時,仍然無法讓我的模板填充JSON數據。在下劃線模板中使用JSON對象 - Backbone.js

下面是一些代碼,我今天寫的:

型號

var CalendarDay = Backbone.Model.extend({ 
    defaults: function() { 
     return { 
      title: "No days for this event", 
      done: false 
     }; 
    }, 
    initialize: function() {} 
}); 

var calendarItem = new CalendarDay({ 
    urlRoot: URL 
}); 

收集

var Calendar = Backbone.Collection.extend({ 
    model: CalendarDay, 
    url: URL 
}); 

查看

var CalendarView = Backbone.View.extend({ 
    template: _.template($('#days').html()), 
    initialize: function() { 
     this.collection = new Calendar(); 
     this.collection.fetch(); 
     this.collection.bind("reset", this.render, this); 
     this.loadTimes(); 
    }, 
    render: function() { 
     var JSON = this.collection.toJSON(); 
     this.$el.html(this.template(JSON)); 
     console.log(JSON); 
    }, 
    listDays: function() { 

    } 

}); 

var calendarView = new CalendarView({ 
    model: calendarItem 
}); 

,這裏是我GETT來自服務器的JSON:

(從執行console.log) 連接
0: Object 
activity_logs: Array[0] 
attendee_code: "BBNVKBGT" 
attendee_fee: "0" 
cego_fee: "0" 
certificate_fee: "0" 
created_at: "2013-02-13 11:29:03" 
days: Array[1] 
description: "A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine." 
disciplines: Array[3] 
done: false 
fee_transaction_id: "0" 
id: "102" 
marketing_materials: Array[0] 
messages: Array[0] 
name: "My very first event" 
organization_id: "1" 
start_at: "2013-02-28 00:00:00" 
state_id: "38" 
states: Array[2] 
title: "No days for this event" 
updated_at: "2013-02-13 11:29:04" 
venue_id: "55" 

是我的控制檯日誌,JSON的一個更好的視野。 screenshot of JSON

更新:這是我的字符串化JSON:

[{"title":"No days for this event","done":false,"id":"102","organization_id":"1","state_id":"38","venue_id":"55","name":"My very first event","description":"A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.","start_at":"2013-02-28 00:00:00","attendee_code":"BBNVKBGT","cego_fee":"0","fee_transaction_id":"0","attendee_fee":"0","certificate_fee":"0","created_at":"2013-02-13 11:29:03","updated_at":"2013-02-13 11:29:04","activity_logs":[],"disciplines":[{"id":"1","label":"Psychologist","desc_text":null,"created":"1152725531","valid":"1","ordering":"-1","assocs":"APA","completion_only":"0","abbr":"psy","created_at":"2006-07-12 10:32:11","updated_at":"0000-00-00 00:00:00","pivot":{"id":"5","created_at":"2013-02-13 11:29:16","updated_at":"2013-02-13 11:29:16","conference_id":"102","discipline_id":"1"}},{"id":"8","label":"Alcohol/Drug Counselor","desc_text":null,"created":"1153074004","valid":"1","ordering":"3","assocs":"NAADAC","completion_only":"0","abbr":"acn","created_at":"2006-07-16 11:20:04","updated_at":"0000-00-00 00:00:00","pivot":{"id":"6","created_at":"2013-02-13 11:29:16","updated_at":"2013-02-13 11:29:16","conference_id":"102","discipline_id":"8"}},{"id":"13","label":"Massage Therapist","desc_text":null,"created":"0","valid":"1","ordering":"6","assocs":null,"completion_only":"1","abbr":"mass","created_at":"2006-07-18 12:01:31","updated_at":"0000-00-00 00:00:00","pivot":{"id":"7","created_at":"2013-02-13 11:29:16","updated_at":"2013-02-13 11:29:16","conference_id":"102","discipline_id":"13"}}],"states":[{"id":"38","code":"OR","name":"Oregon","country_code":"US","pivot":{"id":"6","created_at":"2013-02-13 11:29:16","updated_at":"2013-02-13 11:29:16","conference_id":"102","state_id":"38"}},{"id":"5","code":"CA","name":"California","country_code":"US","pivot":{"id":"5","created_at":"2013-02-13 11:29:16","updated_at":"2013-02-13 11:29:16","conference_id":"102","state_id":"5"}}],"messages":[],"marketing_materials":[],"days":[{"id":"1","conference_id":"102","happens_at":"2013-02-28 00:00:00","start_at":"0000-00-00 00:00:00","end_at":"0000-00-00 00:00:00","created_at":"2013-02-20 12:37:23","updated_at":"2013-02-20 12:37:23"}]}] 

這裏是我的模板視圖:

<script id="days" type="text/template"> 
      <a class="btn small-btn marginRight"></a> 
    </script> 

只是想我要在這裏補充,如果我使用的模板標籤上面諸如<% title %>,我得到錯誤Uncaught ReferenceError: title is not defined

我筋疲力盡,自學中堅比人們想象的要難。任何幫助讓這個球再次滾動將是真棒謝謝。

+0

如果您還沒有看到它,這裏有一個很好的指導骨幹,如果你已經知道JQuery的好: https://github.com/kjbekkelund/writings/blob/master/published/understanding-backbone.md – Plynx 2013-02-21 02:28:10

+0

在控制檯中,做一個'con sole.log(JSON.stringify(the_json_response))'並且用字符串化的JSON更新了你的問題,所以可以在jsfiddle或類似的工具上使用它。 – Cymen 2013-02-21 02:33:01

+0

你的模板有一個標籤?它不會發射除「」之外的任何東西。你需要附加一些數據元素(並處理它是一個集合的事實)... http://underscorejs.org/#template – WiredPrairie 2013-02-21 02:52:10

回答

5

修改視圖

this.$el.html(this.template(JSON)); 

this.$el.html(this.template({days: JSON})); 

修改模板

<script id="days" type="text/template"> 
    <% _.each(days, function(day) { %> <a class="btn small-btn marginRight"><%= day.title %></a> <% }); %> 
</script> 
+0

似乎在這裏正確的軌道,謝謝一堆。雖然,它只返回我在「CalendarDay」模型中設置的默認值「沒有這個事件的日子」。我怎樣才能讓它顯示「happen_at」JSON字段? – 2013-02-21 04:22:38

+0

@MikeLucid試試這個模板:'<%_.each(days,function(day){%><%= day.title %> at <%= day.days[0].happens_at %><% }); %>' – anhulife 2013-02-21 04:52:09

+0

謝謝你的迴應。 – 2013-02-21 05:26:00