【问题标题】:Using JSON object in Underscore template - Backbone.js在 Underscore 模板中使用 JSON 对象 - Backbone.js
【发布时间】:2013-02-21 02:24:38
【问题描述】:

我正在开发一个日历风格的主干应用程序,但对它相当陌生。我已经为此工作了 12 多个小时,但仍然无法让我的模板填充 JSON 数据。

这是我今天写的一些代码:

型号

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

这是我从服务器获取的 JSON:

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"

(来自 console.log) 附件是使用 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>

只是想我会在这里添加,如果我在上面使用模板标签,例如&lt;% title %&gt;,我会收到错误Uncaught ReferenceError: title is not defined

我筋疲力尽,自学骨干比想象的要难。任何帮助让这个球再次滚动都会很棒谢谢。

【问题讨论】:

  • 如果你还没有看过,如果你已经熟悉 JQuery,这里有一个很好的骨干指南:github.com/kjbekkelund/writings/blob/master/published/…
  • 在控制台中,执行console.log(JSON.stringify(the_json_response)) 并使用字符串化的 JSON 更新您的问题,以便可以在 jsfiddle 或类似工具上使用它。
  • 您的模板只有一个标签?除了&lt;a class="btn small-btn marginRight"&gt;&lt;/a&gt;,它不会发出任何东西。您需要附加一些数据元素(并处理它是一个集合的事实)...underscorejs.org/#template

标签: jquery json backbone.js underscore.js


【解决方案1】:

修改视图

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>

【讨论】:

  • 似乎在正确的轨道上,非常感谢。虽然,它只返回我在“CalendarDay”模型“此事件没有天数”中设置的默认值。我怎样才能让它显示到“happens_at”JSON 字段?
  • @MikeLucid 试试这个模板:&lt;% _.each(days, function(day) { %&gt; &lt;a class="btn small-btn marginRight"&gt;&lt;%= day.title %&gt; at &lt;%= day.days[0].happens_at %&gt;&lt;/a&gt; &lt;% }); %&gt;
猜你喜欢
  • 2013-06-23
  • 2015-04-23
  • 2012-01-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-02-01
  • 2014-01-06
  • 1970-01-01
相关资源
最近更新 更多