Simile时间轴 - 活动现在但未显示

Question

我正在使用Simile时间轴的网站上工作。我使用Kendo Core作为单页面应用程序组件。我正在从ajax请求的结果加载时间轴。我手动添加事件。当我检查控制台时，事件源上会填充事件。但是事件不会显示。

我需要更改什么才能让事件显示在时间线上？

提前致谢。

            ///////////////////////////////
            // Timeline
            ///////////////////////////////
            var timelineViewModel = kendo.observable({
                    InitUI: function (id) {
                        var self = this;
                        $.ajax({
                            url: "api/timelines/" + id,
                            type: "GET",
                            dataType: "json",
                            contentType: "application/json",
                            success: function (data) {
                                self.loadTimeLine(data);
                            }
                        });
                    },
                    loadTimeLine: function (data) {

                        SimileAjax.History.enabled = false;

                        $('#TimelineTitle').text(data.title);

                        var tl_el = document.getElementById("my-timeline");
                        var eventSource1 = new Timeline.DefaultEventSource();

                        for(var eIndex = 0; eIndex < data.events.length; eIndex ++)
                        {
                            var evt = new Timeline.DefaultEventSource.Event({
                                title: data.events[eIndex].title,
                                start: data.events[eIndex].start,
                                description: data.events[eIndex].description,
                                caption: data.events[eIndex].title,
                                color: '#FFCC33',
                                text: data.events[eIndex].title
                            });
                            eventSource1._events.add(evt);
                        }

                        var theme1 = Timeline.ClassicTheme.create();

                        theme1.event.bubble.width = 320;
                        theme1.event.bubble.height = 220;

                        var d = data.MinDate;


                        var bandInfos = [
                            Timeline.createBandInfo({
                                width: 100, // set to a minimum, autoWidth will then adjust
                                intervalUnit: Timeline.DateTime.YEAR,
                                intervalPixels: 200,
                                eventSource: eventSource1,
                                date: d,
                                theme: theme1,
                                layout:         'overview'
                            }),
                            Timeline.createBandInfo({
                                width: 100, // set to a minimum, autoWidth will then adjust
                                intervalUnit: Timeline.DateTime.MONTH,
                                intervalPixels: 200,
                                eventSource: eventSource1,
                                date: d,
                                theme: theme1,
                                layout:         'overview'
                            }),
                            Timeline.createBandInfo({
                                width: 350, // set to a minimum, autoWidth will then adjust
                                intervalUnit: Timeline.DateTime.WEEK,
                                intervalPixels: 200,
                                eventSource: eventSource1,
                                date: d,
                                theme: theme1,
                                layout:         'original'
                            })
                        ];

                        bandInfos[1].syncWith = 2;
                        bandInfos[1].highlight = true;

                        bandInfos[0].syncWith = 2;
                        bandInfos[0].highlight = true;

                        tl = Timeline.create(tl_el, bandInfos, Timeline.VERTICAL);
                        tl.layout();


                    }
                })

            var timelineView = new kendo.View(
                "timelineTemplate",
                {
                    model: timelineViewModel
                }
            );

            ///////////////////////////////
            // Layout
            ///////////////////////////////
            var layout = new kendo.Layout("<div id='content'></div>");


            ///////////////////////////////
            // DAS ROUTER
            ///////////////////////////////
            var router = new kendo.Router();
            router.route("(:viewName)/(:id)", function (viewName, id) {

                layout.render("#maincontent");

                if (viewName) {
                    switch (viewName.toLowerCase()) {
                        case "timeline":
                            if (id) {
                                if (id.toLowerCase() == "new") {
                                    layout.showIn("#content", createTimelineView);
                                    createTimelineViewModel.InitUI();
                                }
                                else {
                                    layout.showIn("#content", timelineView);
                                    timelineViewModel.InitUI(id);
                                }
                            }
                            break;
                        case "account":
                            if (id) {
                                layout.showIn("#content", accountView);
                                accountViewModel.InitUI(id);
                            }
                            break;
                    }
                }
                else {
                    layout.showIn("#content", indexView);
                    indexViewModel.InitUI();
                }

            });
            $(function () {
                router.start();
            });