关闭

使用UI Calendar时,遇到异步读取数据报错问题

标签: uiangularcalendar
148人阅读 评论(0) 收藏 举报
分类:

使用UI Calendar时,遇到异步读取数据报错问题


  • 原始代码(有关代码)

    vm.events = [];
    init();
    function init() {
        ecnuMessageDao.getCurrentMessages(function (res) {
            vm.events = res.data;                
        })
    }
    vm.uiConfig = {
        calendar: {
            height: 450,
            editable: true,
            weekNumbers: true,
            navLinks: true,
            eventLimit: true,
            buttonIcons: false,
            locale: 'zh-cn',
            views: {
                day: {
                    titleFormat: 'YYYY年MM月DD日'
                },
                week: {
                    titleFormat: 'YYYY年MM月'
                },
                month: { // name of view
                    titleFormat: 'YYYY年MM月'
                },
            },
            timeFormat: 'HH:mm',
            header: {
                left: 'prev,next today myCustomButton',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,listMonth'
            },
            dayNames: [
                "星期日",
                "星期一",
                "星期二",
                "星期三",
                "星期四",
                "星期五",
                "星期六"
            ], dayNamesShort: ["日", "一", "二", "三", "四", "五", "六"], monthNames: [
                "一月",
                "二月",
                "三月",
                "四月",
                "五月",
                "六月",
                "七月",
                "八月",
                "九月",
                "十月",
                "十一月",
                "十二月"
            ],
            eventClick: vm.alertOnEventClick,
            eventDrop: vm.alertOnDrop,
            eventResize: vm.alertOnResize,
            eventRender: vm.eventRender
        }
    };
    vm.eventSources = [vm.events];
    
  • 代码执行次序

    • 上述代码的执行次序应该是执行到init后,由于有异步请求,因此会继续往下执行,此时vm.events并没有值。等到代码都执行完,数据返回之后执行vm.events = res.data;来改变vm.events的值。这样逻辑上感觉没错,但是数据并没有加到Calendar中。
  • 分析原因
    • 经过调试,发现在执行完vm.events = res.data;之后,vm.events中的值确实是改变了,但是html的显示却没有改变。那么猜测应该是Calendar中的某个监听没有起作用,或者说vm.events = res.data;这条语句没有触发这个监听。
  • 解决过程
    • 后来查看了官方DemoaddEvent方法,发现它是通过events.push操作来添加新的event。因此猜测数组的push方法能够触发该未知的监听。
  • 最终解决方法
    • vm.events = res.data;改成
      for (var i = 0; i < res.data.length; i++) vm.events.push(res.data[i]);
      最后亲测有效。
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:45163次
    • 积分:841
    • 等级:
    • 排名:千里之外
    • 原创:37篇
    • 转载:5篇
    • 译文:0篇
    • 评论:12条
    联系方式
    qq:553778439 请说明加我的原因
    最新评论