zoukankan      html  css  js  c++  java
  • 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="~/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
  • 相关阅读:
    【转】VS2010中 C++创建DLL图解
    [转]error: 'retainCount' is unavailable: not available in automatic reference counting mode
    [转]关于NSAutoreleasePool' is unavailable: not available in automatic reference counting mode的解决方法
    【转】 Tomcat v7.0 Server at localhost was unable to start within 45
    【转】Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds. If
    【转】SVN管理多个项目版本库
    【转】eclipse安装SVN插件的两种方法
    【转】MYSQL启用日志,和查看日志
    【转】Repository has not been enabled to accept revision propchanges
    【转】SVN库的迁移
  • 原文地址:https://www.cnblogs.com/cykj/p/AvalonJS-MVVM-Coder.html
Copyright © 2011-2022 走看看