基于Ajax的Todos项目——计算用户未完成数量并渲染模板中

客户端代码
这里我们通过filter遍历数组和查找满足条件的结果，数组长度即就是未完
成任务数量，由于增删改都要更新用户数量所以我们干脆和渲染模板一起

    var strong = $('#count');
        //向服务器发送ajax请求，获取已经存在的任务
        $.ajax({
            url: '/todo/task',
            type: 'get',
            success: function (response) {
                //将已存在的任务存放在taskAry变量中
                taskAry = response;
                //将数据和html拼接好
                render();
            }

        })
        // 拼接字符串 将拼接好的字符串显示在页面中(这里将calccount调用)
        function render() {
            // 字符串拼接
            var html = template('taskTpl', {
                tasks: taskAry
            });
            // 将拼接好的字符串显示在ul标签中
            taskBox.html(html);
            calcCount();
        }
        //计算未完成任务数量
        function calcCount() {
          //存储结果的变量
            var count = 0;
            //找到未完成任务
            var arr = taskAry.filter(item => item.completed == false);
            //将未完成任务数量更新到strong标签
            count = arr.length;
            strong.text(count);
        }