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

    <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. mybatis实战教程(mybatis in action)之五：与spring3集成

    在这一系列文章中,前面讲到纯粹用mybatis 连接数据库,然后 进行增删改查,以及多表联合查询的的例子,但实际项目中,通常会用 spring 这个沾合剂来管理 datasource 等.充分利用sp ...

  2. bzoj3316: JC loves Mkk

    Description Input 第1行,包含三个整数.n,L,R.第2行n个数,代表a[1..n]. Output 仅1行,表示询问答案.如果答案是整数,就输出整数:否则,输出既约分数“P/Q”来 ...

  3. 禁用Windows窗体的关闭按钮

    1. protected override void OnFormClosing(FormClosingEventArgs e) { e.Cancel = true; base.OnFormClosi ...

  4. 每天一个 Linux 命令（19）：find 命令概览

    Linux下find命令在目录结构中搜索文件,并执行指定的操作.Linux下find命令提供了相当多的查找条件,功能很强大.由于find具有强大的功能,所以它的选项也很多,其中大部分选项都值得我们花时 ...

  5. Codeforces 732e [贪心][stl乱搞]

    /* 不要低头,不要放弃,不要气馁,不要慌张 题意: 给n个插座,m个电脑.每个插座都有一个电压,每个电脑都有需求电压. 每个插座可以接若干变压器,每个变压器可以使得电压变为x/2上取整. 有无限个变 ...

  6. java数据传递例子+内存分析

    一.引用传递 1.例子1 package com.jikexueyuan.ref; class Ref1{ int temp = 10; } public class RefDemo01 { publ ...

  7. [杂] 将高版本iTunes备份恢复到低版本iOS设备中

    除非开发测试用设备,自用设备不要随便升iOS beta,不要随便升iOS beta,不要随便升iOS beta. 对于升级了高版本iOS的用户,默认情况下重刷低版本iOS时,iTunes不允许向低版本 ...

  8. 转载：最近有两款路由器D-link , Tenda分别被爆出固件中存在后门

    最近有两款路由器分别被爆出固件中存在后门. D-link D-link是台湾公司,成立于1986年,『公司致力于高级网络.宽带.数字.语音和数据通信解决方案的设计.制造和营销,是业界的全球领导者』(官 ...

  9. Runtime的几个小例子（含Demo）

    一.什么是runtime(也就是所谓的“运行时”,因为是在运行时实现的.)           1.runtime是一套底层的c语言API(包括很多强大实用的c语言类型,c语言函数);  [runti ...

  10. Python 装饰器学习

    Python装饰器学习(九步入门)   这是在Python学习小组上介绍的内容,现学现卖.多练习是好的学习方式. 第一步:最简单的函数,准备附加额外功能 1 2 3 4 5 6 7 8 # -*- c ...