Appcan mvvm模式采坑之旅

最近在做的一个项目，要求要使用appcan，因为之前没有做过，最开始打算采用和vue结合的方式去做，但是客户那边要求兼容的安卓版本最低为4.3，比较坑的是，vue.js单个文件使用，在安卓4.3下是不支持的，页面什么都没有，无奈，只好放弃这种选择，无意间翻阅appcan文档的时候，发现了appcan是支持mvvm格式的，但是它有自己的格式，于是，很多内容只能参考官网文档。

很不幸运，我看到的官网文档没有实际的例子，需要用的样式绑定classes文档，竟然还是错误的，被误导的。。。，算了，还是不吐槽了。这里把采坑之旅放出来，也算是给自己一个提醒了，官网也还需要经验支持。

主要是数据绑定模块，这和目前主流的vue，angular之类有些不同，具体内容，看例子吧。

按照分三层的方式讲解：

一、html层

  <div class="contentPage">
                <div class="x-container list-item">
                    <div  data-bind="classes:{'x-item':a,'active': now}"  id="checkResult">
                        <div>
                            胜利
                        </div>
                    </div>
                    <div data-bind="classes:{'x-item':a,'active': not(now)}" id="checkResult">
                        <div>
                            失败
                        </div>
                    </div>
                </div>
               <div class="list-item tip-box">
                  <p data-bind="toggle:now">共计1项胜利，人数：6</p>
                  <p data-bind="toggle:not(now)">共计1项失败，人数：2</p>
                </div>
               <!-- 图表分析 -->
                <div data-bind="toggle:now">
                   <div class="hrLine1 list-box">
                        <p>比赛1</p>
                        <p>YDQ01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;12v</p>
                        <div class="hrlineT">
                            <div class="fl">
                             <p>得分：56</p>
                            </div>
                            <div class="textR fr">
                             <p style="color:#1ad464;">人数：6</p>
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
                <!--动态记录-->
                <div data-bind="toggle:not(now)">
                   <div class="hrLine1 list-box">
                        <p>比赛2</p>
                        <p>YDQ01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;12v</p>
                        <div class="hrlineT">
                            <div class="fl">
                             <p>得分：32</p>
                            </div>
                            <div class="textR fr">
                             <p style="color:red;">人数：2</p>
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
            </div>

        </div>

二、js控制层

<script src="js/appcan.js"></script>
        <script src="js/appcan.control.js"></script>
        <script src="js/tools.js"></script>
        <script>
            var Model = new (MVVM.Model.extend({
            defaults:{  //数据初始化部分----相当于vue中的data区
            a:true,
            now:false,  //控制当前h是页面的哪一部分显示
           
            },
            initialize: function() {
            return;
            },
            parse: function(data) {
            return data;
            },
            validate: function(attrs, options) {
            return;
            },
            computeds: {

            },
            sync: function(method, model, options) {
            switch (method) {
            case "create":

            break;
            case "update":

            break;
            case "patch":

            break;
            case "read":
            Service.request({},
            options);
            break;
            case "delete":

            break;
            default:
            break;
            }
            }
            }))();

            var ViewModel = new (MVVM.ViewModel.extend({
            el: "#PageTest",

            initialize: function() {
            return;
            },
            model: Model, //绑定数据默认区
            
            events:{  //绑定事件响应部分----相当于vue中的methods方法区
             //当前显示哪一项内容 胜利-失败？
             "tap #checkResult" :function(){
                Model.set("now", !Model.get("now"));
             },

            },

            }))();
        </script>

 三、css部分

   时间原因，暂且不写。

接下来分析这部分我遇到的问题。

1、官网文档给出的绑定样式介绍

这初看还以为是这样绑定

 <div  data-bind:classes:{'x-item':a,'active': now}"  id="checkResult">

    然而，并不是！！！这样写，样式是不生效的！！！

实际上是这样写的：

 <div  data-bind="classes:{'x-item':a,'active': now}"  id="checkResult">

2、点击事件处理

基本上都是通过在events里面写“tap #id”：function(){...}这种方法写，这种状况有一定的问题，就是要写很多id，且页面中同名的id会执行同一段代码，比较坑。

要执行单独的click，需要在div或者说是元素上用onclick处理，只用click是不响应的。

3、数组下标获取

   这里并没有发现官网有什么下标获取的方式，在一个for循环中，仅提供了value来单项显示，并没有其他的显示方法，在尝试了许多方法都没有成功后，最终选择了用jquery来写这个监听点击事件，并给出下标的方法，具体如下：

<div data-bind="for:items" mvvm-scope id="father">
                 <span data-bind="text:value" style="padding-right: 1em;" onclick="goThis()"></span>
               </div>

 var Model = new (MVVM.Model.extend({
             defaults:{
               items:["1","2","3","4","5","6","7"]
             },
          }))();

这里的部分，是放置在整个mvvm结构之外写的，利用jquery遍历方法中的each方法，监听father下的每一个子元素的点击事件，从而实现区分下标，进行不同的处理。 

$("#father").find('span').each(function(i){
       $(this).click(function(){
              alert(i);
          });
})

 

 

比较坑的是。。。。

一个复杂的json数据，对于里面的细节部分，简直是获取不到，不过数组里面的内容，只要不是嵌套的太多，基本上是可以解析出对应的json数据的。只需要把json的对象名当作参数传进去就好。