JS之MVVM页面模型

1. 名词介绍

  • question（问卷）

    • name （问卷名称）
    • code （问卷编号）
    • desc （问卷说明）
    • type （分类）
    • sendData （发送数据）
    • data （答卷数据）
    • createDate（创建时间）
    • state （状态）
    • isPublic （发布状态）
    • op （操作）
    • OnClickLinkAddQuestion （跳转问卷添加页面）
      • OnClickSaveQuestion （更新问卷信息）
    • OnClickEditQuestion （编辑问卷信息）interface
    • OnClickEditSubject （编辑问卷详情）
    • OnClickPreviewQuestion （预览问卷）
    • OnClickLinkCountQuestion （统计问卷）interface
    • OnClickStopQuestion （停用问卷）interface
    • OnClickDeleteQuestion （删除问卷）interface
    • OnSort() （问卷排序）
    • OnClickSearchQuestion （问卷查询）interface
      • searchQuestionKey （问卷查询标题）
    • OnClickSearchSubjectByQuestion(问卷编辑查询相关题目)interface
      • searchSearchSubjectByQuestionKey
    • OnClickSaveSubjectByQuestion （问卷编辑保存相关题目）interface
    • OnClickLinkPreviewSave （问题预览保存）
    • OnClickPreviewStartTest （问卷预览开始测试）
    • OnClickPreviewEndTest （问卷预览结束测试）
    • OnClickPublicQuestion （发布问卷）interface

  • subject（题库）

    • title （题目标题）

    • code （题目编号）

    • answer{} （题目答案）

    • tip （填写提示）

    • type （题目类型 单选、多选）

    • state （题目状态）

    • count （题目数量）

    • isAnswer （题目是否可以不答）

    • _index （题目索引）

    • _isTop （是否为第一题）

    • _isBottom （是否为最后一题）

    • OnNext() （平移到上一题）

    • OnPrev() （平移到下一题）

    • OnTop() （平移到第一题）

    • OnBottom() （平移到最后一题）

    • OnSort() （题目排序）

    • OnDeleteSelf() （删除此题）

    • OnClickChangeState （启用、停用）interface

    • OnClickAddSubject （添加题目）

    • OnClickSaveSubject （更新题目）interface

    • OnClickSearchSubject （题目查询）interface

      • searchCode （查询编号）
      • searchTitle （查询标题）

    • OnClickAddAnswer （添加答案）

  • answer（答案）
    • title （答案标题）
    • type （答案类型）
    • score （答案分数）
    • skipSubject[subject] （跳题目集合）
    • isSkipSubject （是否可跳题）
    • selectedSkipSubject （选择的跳题）
    • _index （答案索引）
    • _isTop （是否为第一题）
    • _isBottom （是否为最后一题）
    • OnNext() （平移到上一题）
    • OnPrev() （平移到下一题）
    • OnTop() （平移到第一题）
    • OnBottom() （平移到最后一题）
    • OnSort() （题目排序）
    • OnDeleteSelf() （删除此题）

2.功能ViewModel

2.1 问卷题库

$scope.vm = {
    searchCollection:{                              // 1. 查询原型
        params:{                                    // 1.1 题库查询条件                     
            searchCode: "",                         // 1.1.1 查询编号
            searchTitle: "",                        // 1.1.2 查询标题
            searchState:{                           // 1.1.3. 排序原型
                data: [{ text: "全部状态", value: "" }, { text: "启用", value: true }, { text: "禁用", value: false }],
                count: 3,
                selectItem: ""                      // 1.1.3.1 选择的排序值
            },
        },
        _validSearch: function () {                 // 1.2 题库查询验证
            return false;
        },
        GetQuestionList: function () {              // 1.3 获取题库结果集
        },
        OnClickSearchSubject: function(){           // 1.4 题库查询操作
        }
    },
    subjectCollection: {                            // 2. 题库原型 {subject}
        data:[                                      // 2.1 原始数据
        ],
        count:0,                                    // 2.2 原始数据数量
        current: {                                  // 2.3 当前添加的题目
            _isAdd: false,
            _typeTip: "单选题",
            id: 0, // （编号）
            title: "单选题",
            code: "",
            tipCheck: false,
            tip: "",
            type: 1,
            changeType: function (typeValue) {      // 2.3.1 改变状态

            },
            state: false,
            answerCollection: {                     // 2.3.2 答案列表 {answer}
                data: [],                        
                count: 2,
                OnNext: function (item){         // 2.3.2.1 下移答案   
                },
                OnPrev: function (item){         // 2.3.2.2 上移答案
                },
                OnDeleteSelf: function (item){   // 2.3.2.3 删除答案
                },
                OnAdd: function (){              // 2.3.2.4 添加答案
                }
            }
        }
        OnOpen: function(){                         // 2.4 添加题目
        },
        OnClose: function(){                        // 2.5 关闭题目
        },
        OnReset: function(){                        // 2.6 重置题目
        },
        OnSubmit: function(){                       // 2.7 提交答案
        },
        OpenStateDialog: function(){                // 2.8 打开状态对话框
        },
        OnChangeState: function(){                  // 2.9 启用或停用题目
        }
    },          
    Init: function(){                               // 3. 初始化

    }
}

2.2 问卷调查列表

$scope.vm = {
    searchCollection: {                         // 1. 查询原型
        params: {                               // 1.1 问卷查询条件
            questionName: ""
        },
        _validSearch: function () {             // 1.2 问卷查询验证
            return false;
        },
        GetQuestionList: function () {          // 1.3 获取问卷结果集
        },
        OnClickSearchQuestion: function () {    // 1.4 查询获取问卷结果集
        },
    },
    sortCollection: {                           // 2. 排序原型
        data: [{ text: "从新到旧", value: "asc" }, { text: "从旧到新", value: "desc" }],
        count: 2,
        selectItem: "asc",
        OnSort: function () {                   // 2.1 排序方法
        }
    },
    questionCollection:{                        // 3. 问卷列表原型
        data:[                                  // 3.1 原始数据 {question}
            // {
            //     id, // （编号）
            //     name,//      （问卷名称）
            //     code,//      （问卷编号）
            //     desc,//      （问卷说明）
            //     type,//      （分类）
            //     sendData,//  （发送数据）
            //     data,//      （答卷数据）
            //     createDate,//（创建时间）
            //     state,//     （状态）
            //     isPublic//   （发布状态）        
            // }
            // ...
        ],
        viewData:[                              // 3.2 展示数据 
            // {
            //     id, // （编号）
            //     name,//      （问卷名称）
            //     code,//      （问卷编号）
            //     desc,//      （问卷说明）
            //     type,//      （分类）
            //     sendData,//  （发送数据）
            //     data,//      （答卷数据）
            //     createDate,//（创建时间）
            //     state,//     （状态）
            //     isPublic//   （发布状态）        
            // }
            // ...
        ],    
        count:0,                                // 3.3 原始数据数量
        viewCount: 0,                           // 3.4 展示数据数量
        current:{                               // 3.5 当前编辑问卷 {question}
            // id, // （编号）
            // name,//      （问卷名称）
            // code,//      （问卷编号）
            // desc//      （问卷说明）
        },
        OnClickEditQuestion: function(){        // 3.6 编辑问卷信息
        },
        OnClickEditSubject: function(){         // 3.7 编辑问卷详情
        },
        // OnClickPreviewQuestion: function(){   // 预览问卷
        // },
        // OnClickLinkCountQuestion: function(){   // 统计问卷
        // },
        OnClickStopQuestion : function(){       // 3.8 停用问卷
        },
        OnClickDeleteQuestion : function(){     // 3.9 删除问卷
        }
    },
    Init: function(){                           // 4. 初始化

    }
}

2.3 添加问卷

$scope.vm = {
    AddQuestion:{       // 添加问卷
        entity:{
            id, // （编号）
            name,//      （问卷名称）
            code,//      （问卷编号）
            desc//      （问卷说明）
        },
        OnClickSaveQuestion: function(){    // 添加问卷
            
        },
        NextPage: function(){               // 下一步

        },
        Init: function(){   // 初始化

        }
    },
    EditQuestion:{      // 编辑问卷
        searchSearchSubjectByQuestionKey: "",
        entity:{
            id, // （编号）
            name,//      （问卷名称）
            desc//      （问卷说明）
        },
        searchSubjectCollection:{
            data:[      // {subject}
                {
                    id, // （编号）
                    title,// （题目标题）
                    code,// （题目编号）
                    isAnswer,// （题目是否可以不答）
                    _index,// （题目索引）
                    _isTop,// （是否为第一题）
                    _isBottom,// （是否为最后一题）
                    answerCollection:{
                        data:[  //{answer}
                             {
                               id, // （编号）
                               title,//  （答案标题）
                               type,//  （答案类型）
                               score,// （答案分数）
                               skipSubject:[ //（是否可跳到的题目集合）{subject}
                                    {
                                        id, // （编号）
                                        title//  （答案标题）
                                    }
                                    // ...
                               ],
                              isSkipSubject:false, //是否选择跳题目录
                              selectedSkipSubject:{   // {subject}
                                id, // （编号）
                                title//  （答案标题）
                              }
                           }
                        ],
                        count:0
                    }
                }
                // ...
            ],
            count:0,
            selected:[  // {subject}
                {
                    id, // （编号）
                    title,// （题目标题）
                    code,// （题目编号）
                    isAnswer,// （题目是否可以不答）
                    _index,// （题目索引）
                    _isTop,// （是否为第一题）
                    _isBottom,// （是否为最后一题）
                    answerCollection:{
                        data:[  //{answer}
                           {
                               id, // （编号）
                               title,//  （答案标题）
                               type,//  （答案类型）
                               score,// （答案分数）
                               skipSubject:[ //（是否可跳到的题目集合）{subject}
                                    {
                                        id, // （编号）
                                        title//  （答案标题）
                                    }
                                    // ...
                               ],
                              isSkipSubject:false, //是否选择跳题目录
                              selectedSkipSubject:{   // {subject}
                                id, // （编号）
                                title//  （答案标题）
                              }
                           }
                        ],
                        count:0
                    }
                }
                // ...
            ],
            current:{ // {subject}
                    id, // （编号）
                    title,// （题目标题）
                    code,// （题目编号）
                    isAnswer,// （题目是否可以不答）
                    _index,// （题目索引）
                    _isTop,// （是否为第一题）
                    _isBottom,// （是否为最后一题）
                    answerCollection:{
                        data:[  //{answer}
                            id, // （编号）
                            title,//  （答案标题）
                            type,//  （答案类型）
                            score,// （答案分数）
                            skipSubject:[ //（是否可跳到的题目集合）{subject}
                                 {
                                    id, // （编号）
                                    title//  （答案标题）
                                }
                                // ...
                            ],
                            isSkipSubject:false, //是否选择跳题目录
                            selectedSkipSubject:{   // {subject}
                                id, // （编号）
                                title//  （答案标题）
                            }
                        ],
                        count:0
                    }
            },
            selectedCount:0,
            FindByIndex: function(index){

            },
            OnNext: function(){  // （平移到上一题）
                viewModel.OnResetSkipSubject();
                // ......
            },
            OnPrev: function(){  // （平移到下一题）
                viewModel.OnResetSkipSubject();
                // ......
            },
            OnTop: function(){  //  （平移到第一题）
                viewModel.OnResetSkipSubject();
                // ......
            },
            OnBottom: function(){  // （平移到最后一题）
                viewModel.OnResetSkipSubject();
                // ......
            },
            OnDeleteSelf: function(){  // （删除此题）
                viewModel.OnResetSkipSubject();
                // ......
            },
            OnResetSkipSubject: function(){ // 重置跳转的题目

            },
            OnClickSearch: function(){  // 查看结果确认
                viewModel.OnResetSkipSubject();
                // ......
            }
        },
        OnClickSearchSubjectByQuestion: function(){               // 问卷编辑查询相关题目

        },
        PrevPage: function(){               // 上一步

        },
        NextPage: function(){               // 下一步

        },
        Init: function(){   // 初始化

        }
    },
    PreviewQuestion:{   // 预览问卷
        questionCollection:{
            data:[      // {subject}
                {
                    id, // （编号）
                    title,// （题目标题）
                    _index,// （题目索引）
                    _isTop,// （是否为第一题）
                    _isBottom,// （是否为最后一题）
                    answerCollection:{
                        data:[  // {answer} 数据
                            {
                                id, // （编号）
                                title,// （答案标题）
                                type,// （答案类型）
                                score,// （答案分数）
                            }
                            // ...
                        ],
                        count:0,
                        selected:{
                            id, // （编号）
                            title,// （答案标题）
                            type,// （答案类型）
                            score,// （答案分数）
                        }
                    }
                }
                // ...
            ],    
            count:0,
            OnNext: function(){               // （跳到上一题）

            }, 
            OnPrev: function(){               // （跳到下一题）

            }
        },
        OnClickLinkPreviewSave : function(){               // 问题预览保存

        },
        OnClickPreviewStartTest: function(){               // 问卷预览开始测试

        },
        OnClickPreviewEndTest: function(){               // 提交问卷

        },
        PrevPage: function(){               // 上一步

        },
        NextPage: function(){               // 下一步

        },
        Init: function(){   // 初始化

        }
    },
    PublicQuestion:{    // 发布问卷
        OnClickPublicQuestion: function(){  // 发布问卷

        },
        PrevPage: function(){               // 上一步

        },
        Init: function(){   // 初始化

        }
    },
    Init: function(){   // 初始化

    }
}

2.4 结果统计

$scope.vm = {

    Init: function(){   // 初始化

    }
}

2.5 数据位移

var arr = [0,1,2,3,4,5,6,7,8,9];
    console.dir(arr);
// 后移 3=>4,4=>3
var index=3;
arr.splice(index,2,arr[index+1],arr[index]);
    console.dir(arr);
// 前移 1=>0,0=>1
index=1;
arr.splice(index-1,2,arr[index],arr[index-1]);
    console.dir(arr);

99. 接口

99.1 问卷题库接口

  1. 查询题库接口
  2. 停用、启用接口 GET Question/{id}/{status}
  3. 保存题目和选项接口 POST Question

99.2 问卷调查接口

  1. 查询问卷接口 GET Questions/{codetitle}
  2. 编辑问卷信息接口 POST Questionnaire/{id}/{name}/{code}/{description}
  3. 预览问卷接口
  4. 停用问卷接口 Questionnaire/{id}/Enable/{isEnabled}
  5. 删除问卷接口 DELETE Questionnaire/{id}

99.3 添加问卷接口

  1. 添加问卷基本信息接口 POST Questionnaire/{name}/{code}/{description}
  2. 查询题库接口 POST Questionnaire
  3. 添加问卷题目接口 POST Questionnaire/Submit
  4. 发布问卷接口 POST Questionnaire/{id}/Publish/{isPublished}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,847评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,208评论 1赞 292
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,587评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,942评论 0赞 205
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,332评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,587评论 1赞 218
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,853评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,568评论 0赞 198
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,273评论 1赞 242
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2赞 246
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,373评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,031评论 3赞 236
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0赞 195
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2赞 269

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,568评论 25赞 707
  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,612评论 4赞 59
  • 把心放开，你会活得更轻松
    现在的我，正坐在火车上回家。这次车晚点了两个多小时。不知道你们有没有这种感觉，每次车一晚点，心里就开始胡思乱想。因...
    今一阅读 468评论 0赞 1
  • 模板字符串
    可以将两个字符串进行拼接 字符串用 ${}包裹。最后在最外边加上 。就可以形成一个完整的字符串了。
    基本密码宋阅读 109评论 0赞 0