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

    <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. Kubernetes系统架构简介

    1. 前言 Together we will ensure that Kubernetes is a strong and open container management framework fo ...

  2. <<面向模式的软件架构2-并发和联网对象模式>>读书笔记

    服务访问和配置模式 Wrapper Facade可以将有非对象API提供的函数和数据封装到面向对象的类接口中 就是把底层API再封装一次,让外部不用关心是调用哪个平台的API,不如锁,在不同的平台上可 ...

  3. double精度问题

    一个Double值由2个Double相加,比如明明是91.2 + 2.4,结果应为93.6,为什么结果是93.6000000000001 为什么会无端地在小数点后面加很多个0,最后还是一个1 ? 计算 ...

  4. DHTMLX-Grid

    DHTMLX - Grid 介绍 dhtmlxGrid是一个灵活的.易于使用的JavaScript网格组件,可以创建DHTML表与丰富的编辑- sensing,固定的多行页眉和页脚,可调整大小的.可拖 ...

  5. Spring Boot（3）---自定义spring boot starter 问题

    1. "Failed to process import candidates for configuration class [com.simple.....]": 主要原因: ...

  6. Knock: 使用压电传感器来检测敲击

    原文链接:https://www.arduino.cc/en/Tutorial/Knock 敲击检测 本教程介绍如何使用压电传感器检测振动,比如敲门.桌子或其他固体表面. 压电传感器是一种能够在振动. ...

  7. 【OpenCV】视频取坐标

    今天实现了视频播放以后暂停获取鼠标点击处坐标的功能. #include <iostream> #include <opencv2/highgui/highgui.hpp> #i ...

  8. Sql Server 2008和2000查询表的字段和注释

    -- SQL Server 2008 SELECT 表名 = d.name, 表说明 = case when a.colorder=1 then isnull(f.value,'') else '' ...

  9. 【解决】若要使用报表生成器，必须在此计算机上安装 .Net Framework 3.5

    在报表库中试图通过点击菜单“在报表生成器中编辑”编辑报表时,会跳转到错误信息页面,提示: 若要使用报表生成器,必须在此计算机上安装 .Net Framework 3.5. 一般情况下并不是因为没有安装 ...

  10. Error 2103 “Unhandled Error in Silverlight Application“ 解决办法

    当调试SilverLight项目时,如果出现如下错误: 当调试页面时出现如下错误: 解决办法为:打开工程属性,在Startup object:处选择相应的启动应用程序.