9

我正在将 jQuery 插件完整日历与backbone.js 结合使用，并且遇到第一次加载时无法正确显示的问题。

这是包含日历的主干视图的渲染函数：

render: function() {

    var that = this;

    // DEBUG:
    // console.log({entries: data});

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

    this.$('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },

        height: that.$el.parent().height()
    });

            // prints undefined
    console.log(this.$('#calendar').fullCalendar('getView').title);

    window.setTimeout(function() {
        this.$('#calendar').fullCalendar('changeView','agendaWeek');
    }, 500);


    return this;
}

您可以看到我设置了 500 毫秒的超时时间。当我延迟 500 毫秒，然后将视图更改为议程周时，它将显示。但是，如果我不延迟，日历不会显示。在这两种情况下都没有打印错误。

我不知道在这里尝试什么或可能出了什么问题。是否有创建我在文档中某处缺少的日历的回调？

谢谢

编辑：可能是 .html() 功能不完整并导致问题吗？

4

2 回答 2

13

我有一个类似的问题，并在文档中找到了这个重要信息：

http://arshaw.com/fullcalendar/docs/display/render/

我的日历位于当前未选中的选项卡上，导致父容器不可见，因此无法正确绘制。选择选项卡后添加了对渲染方法的调用，一切都很好。

您的问题可能会以类似的方式解决。

于 2013-08-27T10:53:47.017 回答
1

我正在使用backbone.js，我也遇到了同样的问题。

我在OnRender()事件中声明和初始化日历。

后来为了解决这个问题，我将用于声明和初始化日历的代码移到了一个OnShow()事件中。

问题：

根据我的问题，这是因为 DOM 上不存在 require 元素。OnShow()当你的 DOM 完全准备好时被触发。

最后它对我有用。

于 2016-08-04T08:46:59.930 回答