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

    <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. C＃：优惠券代码

    static Random random = new Random(); List<string> generatedVouchers = new List<string>() ...

  2. vscode配置

    默认的挺难看的 颜色主题换成 Monokai Dimmed 用户设置 // 将设置放入此文件中以覆盖默认设置 { "editor.fontFamily": "Monaco ...

  3. 解决Excel 2010只有一个窗口的问题

    Excel 2010打开多个文件,但只有一个窗口的问题. 一般首次安装没有这个问题,碰到装了WPS后再卸载WPS,还有就是OFFICE卸载后重装,也会发生这个现像. 一.: 删除 HKEY_CLASS ...

  4. Visual studio 类视图和资源视图不显示的问题

    关于Visual studio 类视图和资源视图不显示的问题 解决方法: 1. 工具—选项—文本编辑器—C/C++—高级,浏览/导航下的禁用数据库选项置为False; 2. 输入命令:devenv / ...

  5. java基础-servlet-2：生命周期

    1.加载(class load) 2.实例化 3.init() 4.doGet() 5.destroy 只有一个对象存在于服务端提供服务.再次访问,不会再起新对象.

  6. Hibernate5.2之QBC查询

                                                         Hibernate5.2值QBC查询 一.简介  Hibenate的QBC查询个人认为是Hib ...

  7. java对xml文件的读取

    <?xml version="1.0" encoding="UTF-8"?> <body> <names type="1 ...

  8. FPGA低级建模---按键去抖动

    FPGA低级建模,原则上一个模块一个功能,如按键去抖动建模中,有两个模块. 1.detect_module 这个是按键检测模块,主要检测按键的高低电平变化,现在按键是按下还是释放. 2.delay_m ...

  9. fish药品使用说明

    大白片Octozin的官方的使用方法首先换水1/3-1/2.第一天:开始下药(每22.5升水下1片药)第二天:继续下药(每22.5升水下1片药)第三天:还是下药(每22.5升水下1片药)也就是每天下同 ...

  10. 尚学堂Spring视频教程（七）：AOP XML

    此处省略N个字.... 直接看下面 推荐链接: Spring Aop实例之xml配置