一直从事后端开发，对于前端的html+css+js，不熟不熟的。前面写了一个比较复杂的操作界面，我只能说，误工费时。花了一周研究avalonjs2,大神的确就是大神，解决了我很多的问题，

请参考http://www.cnblogs.com/rubylouvre

记录初试结果

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title>我的SPA是没有#hash变化的</title>

     <meta charset="utf-8" />

     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />

     <link rel="stylesheet" href="weui/weui.min.css" />

     <link rel="stylesheet" href="weui/weui2.css" />

     <link rel="stylesheet" href="weui/czh.css" />

     <meta name="format-detection" content="telephone=no" />

     <link rel="stylesheet" href="ratchet/dist/css/ratchet.min.css" />

     <link type="text/css" rel="stylesheet" href="css/fontstyle.css" />

     <link type="text/css" rel="stylesheet" href="css/yjscanpage1.css" />

     <link href="layer.m/need/layer.css" type="text/css" rel="stylesheet" />

     <script src="../wx/layer.m/layer.m.min.js"></script>

     <script src="avalon/avalon.modern.js"></script>

     <style>

         .ms-controller {

             display: none;

         }

     </style>

     <script>

         avalon.component('ms-pager',{

             template: '<div><a href="#/ms-header">ms-header</a><input type="text" ms-duplex-number="@num"/><button ms-on-click="@onPlus">+++</button></div>',

             defaults:{

                 num:1,

                 onPlus:function(){

                     this.num++;

                 }

             }

         });

         avalon.component('ms-button', {

             template: '<div ms-visible="@toggle"><button type="button" ms-click="@toggle = !@toggle"><span><slot name="buttonText"></slot></span></button></div>',

             defaults: {

                 buttonText: "button"

             },

             soleSlot: 'buttonText',

             toggle:true

         });

         var tpl = '<div><a href="#/ms-pager">ms-pager</a><h4>{{@title}}</h4><h5>{{@random}}</h5><button ms-on-click="@onChangeTitle">点击改变title</button><button ms-on-click="@onRandom">获取随机数</button></div>';

         avalon.component('ms-header',{

             template:tpl,

             defaults:{

                 title:"这是标题",

                 random:0,

                 onChangeTitle:function(){

                     this.title = '改变了title' + (new Date - 0);

                 },

                 onRandom:function(){

                     this.random = Math.floor(Math.random()*100)

                 }

             }

         });

         var vm = avalon.define({

             $id:'test',

             tpl: '<div><a href="#/ms-header">ms-header</a></div>',

             button: {//注意这里不能以 $开头

                 buttonText: "按钮内容"

             },

             dialogtpls:[],

             opendialog: function (hash) {

                 vm.dialogtpls.push('<div><' + hash + ' ms-widget=\"{$id:"' + hash + '",cached: true}\"></' + hash + '></div>');//dialog样式

                 //var s = layer.open({

                 //    content: vm.$element.querySelector(".showdialg div").innerHTML,

                 //    style: 'background-color:#09C1FF; color:#fff; border:none;height:20px;'//,

                 //    //time: 2

                 //});

             },

             showpage: function (hash) {

                 vm.tpl = '<div><' + hash + ' ms-widget=\"{$id:"' + hash + '",cached: true}\"></' + hash + '></div>';

             },

             closedialog: function () {

                 vm.dialogtpls.pop();// = '';

             }

         })

         window.addEventListener('hashchange', function (e) {

             var hash = e.newURL.split('#/')[1];

             if (hash.indexOf("dialog") >= 0) {

             }

             else {

                 vm.tpl = '<div><' + hash + ' ms-widget=\"{$id:"' + hash + '",cached: true}\"></' + hash + '></div>';

             }

         });

     </script>

 </head>

 <body ms-controller="test" style="position:relative">

     <ul>

         <li><a ms-click="@showpage('ms-header')">ms-header</a></li>

         <li><a ms-click="@showpage('ms-pager')">ms-pager</a></li>

         <li><a ms-click="@opendialog('ms-pager')">ms-dialog</a></li>

         <li><a ms-click="@opendialog('ms-header')">ms-header</a></li>

         <li><a ms-click="@closedialog('ms-pager')">ms-dialog</a></li>

     </ul>

     <div style="background-color:#f0f0f0;" ms-html="@tpl">

     </div>

     <div class="showdialg">

         <div ms-for="el in @dialogtpls" ms-html="el"></div>

     </div>

 </body>

 </html>

我这里使用的spa跟常规不一样，没有url#xxxx这种方式，

所想要的效果，就是业务配u1,u2,u3,设计调用方式之后，要用modal显示的，就modal显示，可以叠放，

或者是一般的替换u显示。这里的dialogtpls数组用于显示modal的，没有加modal样式和代码。

试用avalon2.0的更多相关文章

  1. iOS开发之AFNetworking 3.0.4使用

    昨天使用Cocoapods导入AFN做POST的时候,导入的最新版的3.0.4,突然发现找不到AFHTTPRequestOperationManager了...上github上一看,发现没有这个了.刚 ...

  2. Hbase1.0 客户端api

    最近在试用Hbase1.0的客户端API,发觉变化还是挺大(以前版本也不熟).到处都是deprecated. 现在应该是这样子: Configuration  conf = HBaseConfigur ...

  3. iOS开发之AFNetworking 3.0.4使用-OC

      GET请求 AFHTTPSessionManager *manager = [AFHTTPSessionManager manager]; [manager GET:URL parameters: ...

  4. avalon2对比avalon1 新增的功能汇总

    avalon2.0 与1.4,1.5相比, 2.0是移除了ms-repeat, ms-each, ms-with, ms-include, ms-include-src,ms-data, ms-sca ...

  5. uniGUI出新版本了，0.97.0.1081

    uniGUI出新版本了,0.97.0.1081,试用版0.97.0.1075,支持Delphi2006~XE7.下载地址是: http://www.unigui.com/downloads 已在XE6 ...

  6. avalon2学习教程08插入移除操作

    本节介绍的ms-if指令与ms-visible很相似,都是让某元素"看不见",不同的是ms-visible是通过CSS实现,ms-if是通过移除插入节点实现. ms-if的用法与1 ...

  7. centos8平台:举例讲解redis6的ACL功能(redis6.0.1)

    一,为什么redis6要增加acl功能模块? 什么是acl? 访问控制列表(ACL)是一种基于包过滤的访问控制技术, 它可以根据设定的条件对接口上的数据包进行过滤,允许其通过或丢弃 redis6增加了 ...

  8. knockoutjs扩展与使用

    原来考虑使用avalon2.0 经过一周的试验,能力不够,用不起来.最终使用了knockout-3.4.js <!DOCTYPE html> <html> <head&g ...

  9. avalon学习笔记

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

随机推荐

  1. angularjs 中的setTimeout(),setInterval() / $interval 和 $timeout

    $interval window.setInterval的Angular包装形式.Fn是每次延迟时间后被执行的函数. 间隔函数的返回值是一个承诺.这个承诺将在每个间隔刻度被通知,并且到达规定迭代次数后 ...

  2. 使用maven命令将jar包导入本地仓库

    mvn install:install-file-DgroupId=包名-DartifactId=项目名-Dversion=版本号-Dpackaging=jar-Dfile=jar文件所在路径 1,本 ...

  3. iOS 企业设备管理 补充中。。。

    公司的设备都有一个统一的管理方法,以前不太明白,今天看了一下资料. 这里解释了什么是设备管理 Profile Manager creates and distributes configuration ...

  4. Uiautomator--Uiselector元素定位

    一.UiSelector作用 按照一定的条件(例如控件的text值,资源id),定位界面上的元素.UiSelector对象的最终目的是去构造一个UiObject对象. 二.元素定位 1.根据text定 ...

  5. ember.js路由无效的解决思路

    进入今天的问题,就是route ember中就一个html,单页面程序(spa),所以页面的跳转,也可以叫做页面的路由,其实就是在这一个html中,不断的进行html的插入和删除了(个人理解) emb ...

  6. sh7.创建yum源脚本练习

    练习1, 写一个脚本分别计算1-100,之间奇数和偶数之和 ji_sum.sh #!/bin/bash # let ..};do ] -eq ];then let sum+=I fi done ech ...

  7. 集合 LinkedList、ArrayList、Set、Treeset

    LinkedList中特有的方法: 1:方法介绍 addFirst(E e) addLast(E e) getFirst() getLast() removeFirst() removeLast() ...

  8. CrashMonkey4IOS App测试

    下载地址:https://github.com/vigossjjj/CrashMonkey4IOS 根据下载地址里面的说明安装一下,以下进行配置 1.进入CrashMonkey4IOS-master/ ...

  9. C#后台调用公网接口（GET, POST）

    //get方法调用接口获取json文件内容        public void GetFunction()        {                       string service ...

  10. 杨氏矩阵：查找x是否在矩阵中，第K大数

    参考:http://xudacheng06.blog.163.com/blog/static/4894143320127891610158/ 杨氏矩阵(Young Tableau)是一个很奇妙的数据结 ...