正文

avalonjs+mvvm实战部分源码

风中男子  2022-02-09  216

关键词：

轻量级前端MVVM框架avalon,它兼容到 IE6 (其他MVVM框架，KnockoutJS(IE6), AngularJS(IE9), EmberJS(IE8), WinJS(IE9) ),它可以更高效地运行于IE10等新版本浏览器中.代码量少,方便格式化输出.

AvalonJS的使用很方便,类似基础标签绑定值,前端代码非常简洁,如果你有一定的JS基础,上手都是很快的.大家下来可以了解一下.

不闲聊,直接看部分代码示例:

  1 <script type="text/javascript"> var appPath = "@Url.Content("~/")";</script>
  2     @{
  3         HttpCookie cookie = Request.Cookies["UserLogin"] as HttpCookie;
  4         if (cookie != null)
  5         {
  6             TempData["OrgId"] = cookie["OrgId"];
  7         }
  8 
  9         var showname = "";
 10 
 11         if (cookie != null)
 12         {
 13             if (!string.IsNullOrEmpty(cookie["Name"]))
 14             {
 15                 TempData["Name"] = HttpContext.Current.Server.UrlDecode(cookie["Name"]);
 16             }
 17             TempData["Login_name"] = cookie["Login_name"];
 18             TempData["Login_pwd"] = cookie["Login_pwd"];
 19             TempData["Login_id"] = cookie["Login_id"];
 20             TempData["Authority"] = cookie["Authority"];
 21             TempData["OrgId"] = cookie["OrgId"];
 22             if (TempData["Name"] != "")
 23             {
 24                 showname = TempData["Name"].ToString();
 25             }
 26             else
 27             {
 28                 Response.Redirect("Login");
 29             }
 30         }
 31         else
 32         {
 33             Response.Redirect("Login");
 34         }
 35     }
 36 <script type="text/javascript">
 37     var OrgId = '@TempData["OrgId"]';//登录 获取的部门id
 38 </script>    
 39     <script src="~/LIMSAbleServer/LIMSAbleServerReg.js"></script>
 40     <script src="~/Scripts/Common/jquery-1.11.1.min.js"></script>
 41     <script src="~/Scripts/Common/jquery.form.js"></script>
 42     <script src="~/Scripts/Common/underscore.js"></script>
 43     <script src="~/Scripts/Common/jqueryToken.js"></script>
 44     <script src="~/Scripts/Common/avalon.js"></script>
 45     <link href="~/Scripts/javascript/chosen/chosen.min.css" rel="stylesheet" />
 46     <script src="~/Scripts/javascript/chosen/chosen.jquery.min.js"></script>
 47     <script src="~/Scripts/Common/Common.js?date=2015-05-11-0211112108"></script>
 48     <script src="~/Scripts/artDialog/artDialog.source.js?skin=xhblue"></script>
 49     <script src="~/Scripts/artDialog/plugins/iframeTools.js?date=2015-08-111"></script>
 50     <script src="~/Scripts/RecordManage/Top.js?date=2015-11-10 1453"></script>
 51 <link href="../../Content/themes/base.css" rel="stylesheet" />
 52 <link href="../../Content/themes/default.css" rel="stylesheet" />
 53 <link href="../../Scripts/javascript/chosen/chosen.min.css" rel="stylesheet" />
 54 <script src="../../Scripts/javascript/jquery-1.11.1.min.js"></script>
 55 <script src="../../Scripts/javascript/chosen/chosen.jquery.min.js"></script>
 56 <script src="../../Scripts/javascript/My97DatePicker/WdatePicker.js"></script>
 57 <script src="~/Scripts/Common/jqueryToken.js"></script>
 58 <script src="~/Scripts/Common/jquery.pagination.js"></script>
 59 <link href="~/Content/pagination.css" rel="stylesheet" />
 60 <script src="~/Scripts/javascript/common.js"></script>
 61 <script src="../../Scripts/RecordManage/Accredit.js?data=2015-11-10 1712"></script>
 62     <script type="text/javascript">
 63         $(function () {
 64             $(".i_user").hoverDelay({
 65                 hoverDuring: 0,
 66                 outDuring: 300,
 67                 hoverEvent: function () {
 68                     $(".userbox", $(".i_user")).slideDown("fast");
 69                 },
 70                 outEvent: function () {
 71                     $(".userbox", $(".i_user")).slideUp("fast");
 72                 }
 73             });
 74         });
 75         //延时通用
 76         (function ($) {
 77             $.fn.hoverDelay = function (options) {
 78                 var defaults = {
 79                     hoverDuring: 200,
 80                     outDuring: 200,
 81                     hoverEvent: function () {
 82                         $.noop();
 83                     },
 84                     outEvent: function () {
 85                         $.noop();
 86                     }
 87                 };
 88                 var sets = $.extend(defaults, options || {});
 89                 var hoverTimer, outTimer;
 90                 return $(this).each(function () {
 91                     $(this).hover(function () {
 92                         clearTimeout(outTimer);
 93                         hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring);
 94                     },
 95                     function () {
 96                         clearTimeout(hoverTimer);
 97                         outTimer = setTimeout(sets.outEvent, sets.outDuring);
 98                     });
 99                 });
100             }
101         })(jQuery);
102         $(function () {
103             $("#mygnmk li a").click(function () {
104                 $(this).addClass("active");
105             });
106         });
107 </script>

Accredit.cshtml

 1             <div class="dataWrap">
 2                 <div class="dataGrid">
 3                     <div class="gridMain">
 4                         <table width="100%" border="0" cellspacing="0" cellpadding="0">
 5                             <tr>
 6                                 <th><span class="btnChose ctrlChosen" ms-click="checkboxSelect(this)"><input  name="" type="checkbox"  value="" /><i></i><em>全选</em></span></th>
 7                                 <th>受理单编号</th>
 8                                 <th>证书编号</th>
 9                                 <th>发证机关</th>
10                                 <th>发证日期</th>
11                                 <th>有效日期</th>
12                                 <th>授权状态</th>
13                                 <th>批准人</th>
14                                 <th>项目名称</th>
15                                 <th>测量范围</th>
16                                 <th>机构名称</th>
17                                 <th>准确度</th>
18                                @* <th>发证单位</th>*@
19                                 <th>录入人员</th>
20                                 <th>录入单位</th>
21                                 <th>受理日期</th>
22                                 <th>证书处理状态</th>
23                                 <th>操作</th>
24                             </tr>
25                             <tr ms-repeat="AccreditList">
26                                <td id="checkDetailList"><span  class="btnChose ctrlChosen " ms-click="checkboxOneSelect(this,el.id,el.Processing_state)"><input type="checkbox" /><i></i></span></td>
27                                 <td><a style="cursor: pointer;" ms-click="GetDetails(el.id)" class="heightColor">{{el.Acceptance_number}}</a></td>
28                                 <td>{{el.Certificate_number}}</td>
29                                 <td>{{el.Issuing_office}}</td>
30                                 <td>{{el.Issue_date==null?"":GetDate(el.Issue_date).Format('yyyy-MM-dd')}}</td>
31                                 <td>{{el.Effective_date==null?"":GetDate(el.Effective_date).Format('yyyy-MM-dd')}}</td>
32                                   <td ms-attr-id="'myzszt'+el.id">{{el.Accredit_state}}</td>
33                                 <td>{{el.Approver}}</td>
34                                 <td>{{el.Authorization_projectname}}</td>
35                                 <td>{{el.Measuring_range}}</td>
36                                 <td>{{el.Organization_name}}</td>
37                                 <td>{{el.Accuracy}}</td>
38                                 @*<td>{{el.}}</td>*@
39                                 <td>{{el.Input_person}}</td>
40                                 <td>{{el.Input_unit}}</td>
41                                 <td>{{el.Acceptance_date==null?"":GetDate(el.Acceptance_date).Format('yyyy-MM-dd')}}</td>
42                                 <td>{{el.Processing_state==0?"已提交":"待提交"}}</td>
43                                 <td><span class="heightColor moreTips">详情<i class="tipsIcon"></i>
44                                     <div class="menuGroupBox">
45                                         <ul>
46                                             <li ms-attr-id="'xq'+el.id"><a href="javascript:;" ms-click="GetDetails(el.id)">详情</a></li>
47                                             <li ms-attr-id="'tj'+el.id"><a href="javascript:;" ms-click="SubmitAccreditOneInfo(el.id)">提交</a></li>
48                                             <li ms-attr-id="'sc'+el.id"><a href="javascript:;" ms-click="DelAccreditInfo(el.id)">删除</a></li>
49                                         </ul>
50                                     </div>
51                                 </span></td>
52                             </tr>
53 
54                         </table>
55                     </div>
56                 </div>

Accredit.cshtml

flutterprovider状态管理---mvvm架构实战(代码片段)

源码仓库地址github仓库地址MVVM介绍MVVM架构分为M(Model)、V(View)、VM(ViewModel)三个部分，他们分别处理自己的分工，在View和Model之间使用ViewModel作为中介者，使View和Model不受业务逻辑影响。Model: 模型层，处理Api数据... 查看详情

前端神器avalonjs入门

转自：http://www.cnblogs.com/vajoy/p/4063824.html avalonJS是司徒正美开发和维护的前端mvvm框架，可以轻松实现数据的隔离和双向绑定，相比angularJS等前端框架它有如下优势：1.压缩后仅有60多kb，而angular的min版是100多kb；2.兼容IE6+，符... 查看详情

前端神器avalonjs入门

valonJS是司徒正美开发和维护的前端mvvm框架，可以轻松实现数据的隔离和双向绑定，相比angularJS等前端框架它有如下优势：1.压缩后仅有60多kb，而angular的min版是100多kb；2.兼容IE6+，符合天朝市场需求；3.效率更高，跑起来比angular... 查看详情

avalonjs中this使用的注意事项

this指针一般是基于宿主环境而存在的一个变量，一般是指向宿主对象，而对于MVVM框架来说，一方面需要在VM中创建对自身对象的操作，同时也可以在V（view）中使用到VM中定义到的方法，以下代码帮助理解：//JS模型varvm=avalon.defin... 查看详情

前端神器avalonjs入门

本章开始搭配requireJS来使用avalon，开始之前，我们可以对avalon进行精简改造（注：新版的avalon已提供了shim版本，无需再做如下的精简了，直接点这里获取）。avalon源码里有自己的AMD加载器和DOMReady模块，使用requireJS来加载各依赖... 查看详情

androidframework实战开发-binder通信java及jni部分源码分析(代码片段)

...#xff1a;QQ交流群：422901085进行课程讨论android跨进程通信实战视频课程（加群获取优惠）1、第一部分进程与ServiceManager通信及客户端程序发起调用详解平时大部分获取ServiceManager中的某一个服务，一般都是最后都是Serv... 查看详情

androidframework实战开发-binder通信java及jni部分源码分析(代码片段)

vue-cli实战

　　最近，MVC、MVVM框架越发流行，当然必不可少的，我也趁着最近工作量小，学习了一个多星期的vue.js2.0版本,改造了一个购票项目，借此分享下学习心得，希望对一部分人有所帮助，当然，有任何不对的地方还望各路大神指出... 查看详情

androidframework实战视频--init进程的bootanimation启动源码分析（补充android10部分的bootanimation的启动源码分析）(代码片段)

课程答疑和新课信息：QQ交流群：422901085进行课程讨论FrameWork入门课视频链接：https://edu.csdn.net/course/detail/30298FrameWork实战课1视频链接：https://edu.csdn.net/course/detail/30275FrameWork跨进程通信视频链接：查看详情

spring实战spring注解配置工作原理源码解析(代码片段)

一、背景知识在【Spring实战】Spring容器初始化完成后执行初始化数据方法一文中说要分析其实现原理，于是就从源码中寻找答案，看源码容易跑偏，因此应当有个主线，或者带着问题、目标去看，这样才能最... 查看详情

spring实战spring注解配置工作原理源码解析(代码片段)

ios开发之rac+mvvm实战

参考技术A本文介绍两个开发中常用的场景，第一个是UITableView列表界面通过网络请求数据展示数据，第二个是登录功能。功能比较基础，但都是精髓。分享一下笔者对MVVM的一些见解，在此抛砖引玉，希望能对广大开发者提供一... 查看详情

实战|opencv带掩码(mask)的模板匹配使用技巧与演示(附源码)

导读本文将重点介绍OpenCV带掩码(mask)的模板匹配使用技巧与演示。（公众号：OpenCV与AI深度学习）背景介绍在使用模板匹配时，一些特定情况中我们并不需要将整个模板图像拿来匹配，而只需要其中特定的部分做模... 查看详情

bugreport实战(代码片段)

...码篇(一)从源码角度阐释了Bugreport，那么本文则是从实战角度来说说，如何看懂bugreport，对于通过bugreport获取到内容往往非常长，这里简单划分为19部分，先整体上简单说说每部分log的title信息。1.系统build相关... 查看详情

wpf实战案例-mvvm模式下在xaml中弹出窗体

原文:WPF实战案例-MVVM模式下在Xaml中弹出窗体相信很多学习和开发wpf项目的同学都了解过mvvm模式，同样，在mvvm模式下会有一个不可忽视的问题，就是怎么在xaml中弹出窗体，而不破坏MVVM本身的结构。关于弹出窗体的方式还是... 查看详情

androidmvvm-编程思想2（入门实战mvvm，databinding，viewmodel，livedata）(代码片段)

...0c;ViewModel，LiveData）AndroidMVVM-编程思想2（入门实战MVVM，DataBinding，ViewModel，LiveData）AndroidMVVM-编程思想3（封装基类BaseMvvmActivity，BaseMvvmFragment）DataBinding使用首先开启app模块的gradle配置文件and... 查看详情

wpf微信mvvm

...等后续不断的完善。参考两位大神的日志：WEB版微信协议部分功能分析、【完全开源】微信客户端.NET版尤其是周见智大神的DEMO，因为好多和微信的服务端交互，都借鉴了大神的源码，帮助巨大，可以说我相当于做了一个翻版，... 查看详情