Appcan mvvm模式采坑之旅

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

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

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

按照分三层的方式讲解：

一、html层

  

                

                    

                        

                            胜利
                        
                    
                    

                        

                            失败
                        
                    
                
               

                  
共计1项胜利，人数：6
                  
共计1项失败，人数：2
                
               
                

                   

                        
比赛1
                        
YDQ01      12v
                        

                            

                             
得分：56
                            
                            

                             
人数：6
                            
                        
                        

                    
                
                
                

                   

                        
比赛2
                        
YDQ01      12v
                        

                            

                             
得分：32
                            
                            

                             
人数：2
                            
                        
                        

                    
                
            

        

二、js控制层

 三、css部分

   时间原因，暂且不写。

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

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

这初看还以为是这样绑定

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

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

实际上是这样写的：

 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来写这个监听点击事件，并给出下标的方法，具体如下：

 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的对象名当作参数传进去就好。