//保存取消操作（使用双向绑定）

    <div ms-controller='test'>

          <table border="1" style="border-collapse: collapse;">

              <tbody :visible="@showLayer">

                  <tr :for="(k,v) in @data" >

                      <td height="66">

                          <div :visible="v.showCurRow">

                              <input :duplex="v.value" :attr="{'placeholder':v.placeholder,'type':v.type}"/>

                              <div style="text-align: center;padding-top:10px;">

                                  <button :click="v.save" style="margin-right:10px;">保存</button>

                                  <button :click="v.cancel">取消</button>

                              </div>

                          </div>

                      </td>

                      <td>

                          <a href="javsscript:;" :click="v.showCurRow=!v.showCurRow">{{v.showCurRow?'收缩':'展开'}}

</a>

                      </td>

                  </tr>

              </tbody>

              <tfoot>

                <tr>

                    <td colspan="2" align="center">

                        <button :click="@showLayer=!@showLayer" :click-1="@console">弹层</button>

                    </td>

                </tr>

              </tfoot>

          </table>

    </div>

</body>

<script>

    var vm=avalon.define({

        $id:"test",

        data:[{'name':'用户名',"value":'',type:'text'},{'name':'密码',"value":'',type:'password'}],

        showLayer:true,

        init:function(){

            var that=this;

            var newData=vm.data.$model;

            _.each(newData,function(item){

                item['saveValue']='';

                item['showCurRow']=true;

                item['placeholder']='请输入'+item.name;

                item['type']=item.type;

                item['save']=function(){

                    this['saveValue']=this['value'];

                    this['showCurRow']=false;

                };

                item['cancel']=function(){

                    this['value']=this['saveValue'];

                    this['showCurRow']=false;

                }

            });

            vm.data=newData

        },

        console:function(){

            console.info(this.data.$model)

        }

    });

    vm.init();
 //数据延迟赋值，联动效果

<body>

    <div :controller="haha">

        <form name="leyi">

            <select  name="halo" :duplex="@data.expSelected">

                <option  :for="(k,v) in @data.selectArr" :attr="{'value':v.VALUE}">{{v.DISPLAY_VALUE}}</option>

            </select>

            <select  name="" :visible="@data.expSelected==1" :attr="{'disabled':@data.expSelected!=1}" >

                <option value="0">矩形</option>

                <option value="1">圆形</option>

            </select>

            <select  name="" :visible="@data.expSelected==2" :attr="{'disabled':@data.expSelected!=2}">

                <option value="0">红色</option>

                <option value="1">绿色</option>

            </select>

        </form>

    </div>

<script>

    //数据延迟赋值，联动效果

    var vm=avalon.define({

        $id:'haha',

        data:{

             expSelected:'',

            "selectArr":[]

        },

        init:function(){

          var that=this;

            var selectArrData=[

                {

                    "DISPLAY_VALUE": "其他",

                    "VALUE": "3"

                },

                {

                    "DISPLAY_VALUE": "颜色",

                    "VALUE": "2"

                },

                {

                    "DISPLAY_VALUE": "图形",

                    "VALUE": "1"

                }

            ];

            //that.data.selectArr=selectArrData;

            setTimeout(function(){//数据延迟加载

                that.data.selectArr=selectArrData;

                that.data.expSelected=2

             },1000)

        }

    });

    vm.init();

</script>
//查看更多的展开收缩

<body>

    <div :controller='test'>

        <span :for="el in data|limitBy(4)">{{el}}</span>

        <span :for="el in data|limitBy(@data.length-4,4)" :visible="@bool">{{el}}</span>

        <span :visible="@data.length>4" :click="@bool=!@bool">{{@bool?'收缩':'更多'}}</span>

    </div>

</body>

<script>

    var vm=avalon.define({

        $id:"test",

        data:[1,2,3,4,5,6,7],

        bool:false

    });

</script>
//tab切换

<style>

    .active{color:red}

</style>

</head>

<body>

    <div :controller='test'>

        <div class="tabHeader">

            <span :for="(k,v) in @tabData" :mouseenter="@tabActiveIndex=k" 

:class="[(@tabActiveIndex==k&&'active')]">{{v.tabTitle}}</span>

        </div>

        <ul  class="tabContent">

            <li :for="(k,v) in @tabData" :visible="k==@tabActiveIndex" >{{v.tabContent}}</li>

        </ul>

    </div>

</body>

<script>

    var vm=avalon.define({

        $id:"test",

        tabData:[

            {

                tabTitle:"tab1标题",

                tabContent:"tab1内容"

            },

            {

                tabTitle:"tab2标题",

                tabContent:"tab2内容"

            },

            {

                tabTitle:"tab3标题",

                tabContent:"tab3内容"

            }

        ],

        tabActiveIndex:0

    });

</script>

avalon使用笔记的更多相关文章

  1. avalon学习笔记

    背景: 刚刚到一家新的公司,我新接手的项目采用的mvvm框架是avalon,当然我以前没有学过angular,但是用过react,所以对于这类框架应该不算陌生.但毕竟是一个新的框架,所以还是先学起来, ...

  2. avalon学习笔记一 列表及条件过滤

    好长时间都没有更新博客了,不是因为没有学习新的东西,而是到了新的单位每天玩命加班实在是太累了!经过一年的努力吧,终于可以轻松一下了.废话少说,直接干货吧! 由于是学习阶段,就直接拿了公司的二级页面做了 ...

  3. avalon 笔记---Mr.wing

    Avalon笔记步骤一:引用js文件<script src="js/avalon.js"></script>步骤二:<script> var v ...

  4. IE6/IE7尿性笔记 && avalon && director

    表单提交 [ie6] form默认特性(input回车以及点击type=submit的按钮会自动触发form submit),在ie6中,不能使button[submit],必须是input[subm ...

  5. 架构 Roadmap 笔记分享

    虽然我们的架构不是开源的,不过一些笔记可以愿意公开和大家讨论一下,我相信不少人在和我们干着同样的事情,那不如一块儿交流一下,这样我们可以更快. 这里前端,后端都有,前端我们用的是 avalon js, ...

  6. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  7. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  8. 一步步编写avalon组件01：弹出层组件

    avalon2已经稳定下来,是时候教大家如何使用组件这个高级功能了. 组件是我们实现叠积木开发的关键. avalon2实现一个组件非常轻松,并且如何操作这个组件也比以前的avalon2,还是react ...

  9. Vue学习笔记1

    目录 前言 1.vue和avalon一样,都不支持VM初始时不存在的属性 2.input元素中属性与v-model同时存在以属性为优先 3.VM中的函数放到data属性和methods属性中的区别,以 ...

随机推荐

  1. [Maven]修改Maven的本地仓库路径

    安装Maven后我们会在用户目录下发现.m2 文件夹.默认情况下,该文件夹下放置了Maven本地仓库.m2/repository.所有的Maven构件(artifact)都被存储到该仓库中,以方便重用 ...

  2. Spark常用函数（源码阅读六）

    源码层面整理下我们常用的操作RDD数据处理与分析的函数,从而能更好的应用于工作中. 连接Hbase,读取hbase的过程,首先代码如下: def tableInitByTime(sc : SparkC ...

  3. C#实现堆栈

    堆栈(Stack)是一种特殊的线性表,是一种操作只允许在尾端进行插入或删除等操作的线性表.表尾允许进行插入删除操作,称为栈顶(Top),另一端是固定的,称为栈底(Bottom).栈的操作使按照先进后出 ...

  4. CentOS开机无法进入系统，如何查错

    开机时按e/F5按钮,进入选择系统界面 会出现 CentOS(2.6.32-...类似的选择列表,选择默认的系统然后按e: 这时会出现 root kernel ... initd... 三个选项,选择 ...

  5. 监听自定义ItemRender的事件

    <mx:Repeater id="rp" dataProvider="{_layersInfo}">    <mx:VBox label=&q ...

  6. logback 配置

    logback 配置 logback的配置方式包括:编程配置.XML文件配置.Groovy文件配置.对于使用log4j的用户,还可以通过logback提供的工具( http://logback.qos ...

  7. autoit 使用excel自带函数操作excel

    Looking into the includes <Excel.au3> helped shed some light on things. To summarize what I've ...

  8. LR12.53—第1课：构建Vuser脚本

    第1课:构建Vuser脚本 要生成系统上的负载,首先建立一个可以运行以模拟真实用户行为Vuser脚本.您使用VuGen创建和构建Vuser脚本. 在这一课中,你将涵盖以下主题: 介绍VuGen将 - ...

  9. android微信分享要注意的地方

    最近在做android端分享的功能,在微信开放平台查看了下官网上的开发文档,一步一步的按文档上的步骤来: 1.申请你的AppID 2.下载开发工具包 3.搭建开发环境,引入libammsdk.jar文 ...

  10. 解决NetBeans编辑器中文乱码问题

    在JDK→JRE→lib目录下找到fontconfig.properties.src文件,打开,找到# Component Font Mappings,表示字体映射,可以看到下面列出了几种字体映射集合 ...