Question

我正在使用jQuery日历来显示基于ruby on rails应用程序中日期的事件。在calender插件的js文件中，它需要我的events.json文件应该是应用程序的公共目录。 events.json包含我想在日历上标记的日期的记录。有没有蚂蚁方法将数据从控制器呈现到保存在应用程序公共目录中的文件，或者如何从我的日历视图中访问events.json。

我的日历app.js文件就像，它位于资产目录中：

(function($) {

    "use strict";

    var options = {
        events_source: 'events.json',
        view: 'month',
        tmpl_path: 'tmpls/',
        tmpl_cache: false,
        day: 'now',
        onAfterEventsLoad: function(events) {
            if(!events) {
                return;
            }
            var list = $('#eventlist');
            list.html('');

            $.each(events, function(key, val) {
                $(document.createElement('li'))
                    .html('<a href="' + val.url + '">' + val.title + '</a>')
                    .appendTo(list);
            });
        },
        onAfterViewLoad: function(view) {
            $('.page-header h3').text(this.getTitle());
            $('.btn-group button').removeClass('active');
            $('button[data-calendar-view="' + view + '"]').addClass('active');
        },
        classes: {
            months: {
                general: 'label'
            }
        }
    };

    var calendar = $('#calendar').calendar(options);

    $('.btn-group button[data-calendar-nav]').each(function() {
        var $this = $(this);
        $this.click(function() {
            calendar.navigate($this.data('calendar-nav'));
        });
    });

    $('.btn-group button[data-calendar-view]').each(function() {
        var $this = $(this);
        $this.click(function() {
            calendar.view($this.data('calendar-view'));
        });
    });

    $('#first_day').change(function(){
        var value = $(this).val();
        value = value.length ? parseInt(value) : null;
        calendar.setOptions({first_day: value});
        calendar.view();
    });

    $('#language').change(function(){
        calendar.setLanguage($(this).val());
        calendar.view();
    });

    $('#events-in-modal').change(function(){
        var val = $(this).is(':checked') ? $(this).val() : null;
        calendar.setOptions({modal: val});
    });
    $('#events-modal .modal-header, #events-modal .modal-footer').click(function(e){
        //e.preventDefault();
        //e.stopPropagation();
    });
}(jQuery));

我的events.json就像：

{
    "success": 1,
    "result": [
        {
            "id": "293",
            "title": "This is warning class event with very long title to check how it fits to evet in day view",
            "url": "javascript:void()",
            "class": "event-warning",
            "start": "1400148932",
            "end":   "1400199999"
        },
        {
            "id": "256",
            "title": "Event that ends on timeline",
            "url": "javascript:void()",
            "class": "event-warning",
            "start": "1363155300000",
            "end":   "1363227600000"
        },
        {
            "id": "276",
            "title": "Short day event",
            "url": "javascript:void()",
            "class": "event-success",
            "start": "1363245600000",
            "end":   "1363252200000"
        },
        {
            "id": "294",
            "title": "This is information class ",
            "url": "javascript:void()",
            "class": "event-info",
            "start": "1363111200000",
            "end":   "1363284086400"
        },
        {
            "id": "297",
            "title": "This is success event",
            "url": "javascript:void()",
            "class": "event-success",
            "start": "1363234500000",
            "end":   "1363284062400"
        },
        {
            "id": "54",
            "title": "This is simple event",
            "url": "javascript:void()",
            "class": "",
            "start": "1363712400000",
            "end":   "1363716086400"
        },
        {
            "id": "532",
            "title": "This is inverse event",
            "url": "javascript:void()",
            "class": "event-inverse",
            "start": "1364407200000",
            "end":   "1364493686400"
        },
        {
            "id": "548",
            "title": "This is special event",
            "url": "javascript:void()",
            "class": "event-special",
            "start": "1363197600000",
            "end":   "1363629686400"
        },
        {
            "id": "295",
            "title": "Event 3",
            "url": "javascript:void()",
            "class": "event-important",
            "start": "1364320800000",
            "end":   "1364407286400"
        }
    ]
}

Answer 1

将日历的来源设置为日历的json视图的路径。因此，您在rails中使用JSON呈现选项并为其设置类似/calendar/events/json的路由，检查以您期望的格式返回数据，然后将该URL设置为JQuery的events_source属性日历。

您可以在Section 2.2.9 here中看到如何在Rails中设置JSON渲染 - 这是一个非常简单的过程。然后你只需要链接到你的控制器。

或者，您可以在Calendar控件所在的同一视图中输出json作为JavaScript文字，因此它内置于该请求中。不过，我认为那会有点灵活。

ROR：如何将数据呈现到公共目录中的文件

1 个答案: