4

I am working on a calendar style backbone app, but am fairly new to it. I have been wokring on this for over 12 hrs now and still haven't been able to get my templates to populate with the JSON data.

Here is some code I've written today:

Model

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

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

Collection

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

View

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

and here is the JSON I am gett from the server:

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"

(from console.log) attached is a better view of my console log with JSON. screenshot of JSON

UPDATE: here is my stringified 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"}]}] 

Here is my template view:

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

Just thought I would add here, if I use a template tag in the above such as <% title %>, I get the error Uncaught ReferenceError: title is not defined

I am exhausted, teaching myself backbone is harder than one would think. Any help to get this ball rolling again would be awesome Thank you.

3
  • If you haven't seen it, here's a good guide to backbone if you already know JQuery well: github.com/kjbekkelund/writings/blob/master/published/… Commented Feb 21, 2013 at 2:28
  • In console, do a console.log(JSON.stringify(the_json_response)) and updated your question with the stringified JSON so it is possible to work with it on jsfiddle or similar. Commented Feb 21, 2013 at 2:33
  • Your template has a single tag? It's not going to emit anything other than <a class="btn small-btn marginRight"></a>. You need to attach some of the data elements (and handle the fact that it's a collection) ... underscorejs.org/#template Commented Feb 21, 2013 at 2:52

1 Answer 1

5

modify view

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

to

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

modify template

<script id="days" type="text/template">
    <% _.each(days, function(day) { %> <a class="btn small-btn marginRight"><%= day.title %></a> <% }); %>
</script>
Sign up to request clarification or add additional context in comments.

2 Comments

Seems to be on the right track here, thanks a bunch. Although, it is only returning the default value I set in `CalendarDay' model "No days for this event". How can i make it show to "happens_at" JSON field?
@MikeLucid try this template: <% _.each(days, function(day) { %> <a class="btn small-btn marginRight"><%= day.title %> at <%= day.days[0].happens_at %></a> <% }); %>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.