首页 > 代码库 > AvalonJS+MVVM实战部分源码

AvalonJS+MVVM实战部分源码

轻量级前端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=http://www.mamicode.com/"~/LIMSAbleServer/LIMSAbleServerReg.js"></script> 40     <script src=http://www.mamicode.com/"~/Scripts/Common/jquery-1.11.1.min.js"></script> 41     <script src=http://www.mamicode.com/"~/Scripts/Common/jquery.form.js"></script> 42     <script src=http://www.mamicode.com/"~/Scripts/Common/underscore.js"></script> 43     <script src=http://www.mamicode.com/"~/Scripts/Common/jqueryToken.js"></script> 44     <script src=http://www.mamicode.com/"~/Scripts/Common/avalon.js"></script> 45     <link href=http://www.mamicode.com/"~/Scripts/javascript/chosen/chosen.min.css" rel="stylesheet" /> 46     <script src=http://www.mamicode.com/"~/Scripts/javascript/chosen/chosen.jquery.min.js"></script> 47     <script src=http://www.mamicode.com/"~/Scripts/Common/Common.js?date=2015-05-11-0211112108"></script> 48     <script src=http://www.mamicode.com/"~/Scripts/artDialog/artDialog.source.js?skin=xhblue"></script> 49     <script src=http://www.mamicode.com/"~/Scripts/artDialog/plugins/iframeTools.js?date=2015-08-111"></script> 50     <script src=http://www.mamicode.com/"~/Scripts/RecordManage/Top.js?date=2015-11-10 1453"></script> 51 <link href=http://www.mamicode.com/"../../Content/themes/base.css" rel="stylesheet" /> 52 <link href=http://www.mamicode.com/"../../Content/themes/default.css" rel="stylesheet" /> 53 <link href=http://www.mamicode.com/"../../Scripts/javascript/chosen/chosen.min.css" rel="stylesheet" /> 54 <script src=http://www.mamicode.com/"../../Scripts/javascript/jquery-1.11.1.min.js"></script> 55 <script src=http://www.mamicode.com/"../../Scripts/javascript/chosen/chosen.jquery.min.js"></script> 56 <script src=http://www.mamicode.com/"../../Scripts/javascript/My97DatePicker/WdatePicker.js"></script> 57 <script src=http://www.mamicode.com/"~/Scripts/Common/jqueryToken.js"></script> 58 <script src=http://www.mamicode.com/"~/Scripts/Common/jquery.pagination.js"></script> 59 <link href=http://www.mamicode.com/"~/Content/pagination.css" rel="stylesheet" /> 60 <script src=http://www.mamicode.com/"~/Scripts/javascript/common.js"></script> 61 <script src=http://www.mamicode.com/"../../Scripts/RecordManage/Accredit.js?data=http://www.mamicode.com/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=http://www.mamicode.com/"" /><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=http://www.mamicode.com/"javascript:;" ms-click="GetDetails(el.id)">详情</a></li>47                                             <li ms-attr-id="‘tj‘+el.id"><a href=http://www.mamicode.com/"javascript:;" ms-click="SubmitAccreditOneInfo(el.id)">提交</a></li>48                                             <li ms-attr-id="‘sc‘+el.id"><a href=http://www.mamicode.com/"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

 

AvalonJS+MVVM实战部分源码