dalangzhonghangxing的专栏

学习,分享。

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

使用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]);
      最后亲测有效。
阅读更多
文章标签: ui angular calendar
个人分类: angularjs
上一篇Jpa中ManyToMany和OneToMany的双向控制
下一篇HTML中href赋值时会自己加上该页面parent URL的问题
想对作者说点什么? 我来说一句

calendar类的小应用

2014年08月15日 5KB 下载

java web开发中常遇到问题

2012年12月10日 47KB 下载

maven报错积累文件

2013年09月09日 37KB 下载

hadoop安装过程中的问题

2017年09月15日 302KB 下载

安装时遇到问题

2007年09月29日 34KB 下载

matlab使用过程中的常见问题解答

2013年07月13日 191KB 下载

没有更多推荐了,返回首页

关闭
关闭