![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
knockout
文章平均质量分 82
sam1012
这个作者很懒,什么都没留下…
展开
-
Knockout应用开发指南 第一章:入门
1 Knockout简介 (Introduction)Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化。Knockout有如下4大重要概念:声明式绑定 (Declarative Bindings):使用简明易读的语法很容易地将模型(model)数据关联到DOM元素上。UI界面自动刷新 (Automatic UI转载 2015-04-07 15:48:28 · 434 阅读 · 0 评论 -
一个共通的viewModel搞定所有的分页查询一览及数据导出(easyui + knockoutjs + mvc4.0)
前言大家看标题就明白了我想写什么了,在做企业信息化系统中可能大家写的最多的一种页面就是查询页面了。其实每个查询页面,除了条件不太一样,数据不太一样,其它的其实都差不多。所以我就想提取一些共通的东西出来,再写查询时只要引入我共通的东西,再加上极少的代码就能完成。我个人比较崇尚代码简洁干净,有不合理的地方欢迎大家指出。 这篇文章主要介绍两个重点:1、前台viewModel的实现。2、后台服转载 2015-04-15 17:09:47 · 1434 阅读 · 1 评论 -
我的权限系统设计实现MVC4 + WebAPI + EasyUI + Knockout(一)
一、前言之前的博客一直都还没写到框架的实现及权限系统,今天开始写我的权限系统,我以前做过的项目基本上都有权限管理这个模块,但各个系统都会有一些不太一样,有些简单点,有些稍微复杂一点,一句话,我们做的系统都离不开这个权限系统。所以网上很多人尝试做一个通用的权限系统,不评论他们做的怎么样,只是说在网上能找到的直接能用的应该不多,适用的并且能集成到项目中的就更少了,所以还是考虑自己做一个,不一定转载 2015-04-15 17:12:52 · 879 阅读 · 0 评论 -
我的权限系统设计实现MVC4 + WebAPI + EasyUI + Knockout(三)图形化机构树
一、前言组织机构是国内管理系统中很重要的一个概念,以前我们基本都是采用数据列表的形式展现,最多只是采用树形列表展现。虽然够用,但是如果能做成图形化当然是最好不过了。这里我不用任何图形控件,就用最原始的方式,用脚本画html的方式来展现一个图形化的机构树。二、功能分析当然我们除了生成图形的功能还有其它的维护机构数据的功能: 1、展现机构图形 2、新增组织机构 3、转载 2015-04-15 17:15:03 · 1260 阅读 · 0 评论 -
我的权限系统设计实现MVC4 + WebAPI + EasyUI + Knockout(五)框架及Web项目的组件化
一、组件化印象1、先给大家看一张截图如果我告诉大家,这就是一个web管理系统发布后的所有内容,你们会不会觉得太简洁了,只有一个web.config、一个Global.asax文件,其它的都是dll文件,没有aspx、cshtml、html页面,没有js css images文件,但它的确能跑起来,跑起来之后的截图如下2、再看我新建一个项目的流程新建一转载 2015-04-15 17:17:47 · 1208 阅读 · 0 评论 -
我的权限系统设计实现MVC4 + WebAPI + EasyUI + Knockout(二)菜单导航
一、前言上篇博客中已经总体的说了一下权限系统的思路和表结构设计,那接下来我们就要进入正文了,先从菜单导航这个功能开始。二、实现这个页面基本不用什么需求分析了,大家都很明白,不过在这个页面要多维护一个东西,那就是定义页面中有哪些按钮,这个用弹出窗口做。 我们技术分析一下: 1、直在grid中在线编辑,使用easyui的treegrid控件可实现。 2、行编辑时选择转载 2015-04-15 17:14:41 · 954 阅读 · 0 评论 -
asp.net mvc利用knockoutjs实现登陆并记录用户的内外网IP及所在城市
前言前面第一篇开了头个,现在想先从登陆写起,但感觉还有很多东西应该放在前面写,比如 1、MVC及Web API的Route配置,Web API的Route配置如何支持命名空间 2、如何配置Filters(实现安全验证、错误处理等等) 3、自定义Filters、HttpRouteConstraint、ModelBinder及HttpParameterBinding等 这些问题转载 2015-04-15 17:08:50 · 820 阅读 · 0 评论 -
通用的web系统数据导出功能设计实现(导出excel2003/2007 word pdf zip等)
前言我们在做web系统中,导出也是很常用的一个功能,如果每一个数据列表都要对应写一个导出的方法不太现实。现在就想设计一个共通的功能来实现这个导出。需求分析在开始之前我们先要明白我们要实现怎样一个功能 1、支持导出excel2003/excel2007 word pdf等文件格式 2、支持数据分页,可以导出全部页或指定页 3、支持导出的文档再压缩zip rar 7转载 2015-04-15 17:12:33 · 814 阅读 · 0 评论 -
通用的业务编码规则设计实现
一、背景每一个企业应用中不可避免的都会涉及到业务编码规则的问题,比如订单管理系统中的订单编号,比如商品管理系统中的商品编码,比如项目管理系统中的项目编码等等,这一系列的编码都需要管理起来,那么它们的应该如何编码的,具体的编码规则我们很多时候都是直接写在程序当中常用的的编码有: 1、数据库自增长ID或最大值加1 2、GUID 3、时间戳 4、常量+自增长 5、常量转载 2015-04-15 17:20:59 · 1117 阅读 · 0 评论 -
Asp.Net MVC及Web API框架配置会碰到的几个问题及解决方案
前言刚开始创建MVC与Web API的混合项目时,碰到好多问题,今天拿出来跟大家一起分享下。有朋友私信我问项目的分层及文件夹结构在我的第一篇博客中没说清楚,那么接下来我就准备从这些文件怎么分文件夹说起。问题大概有以下几点: 1、项目层的文件夹结构 2、解决MVC的Controller和Web API的Controller类名不能相同的问题 3、给MVC不同命名空间的Area的注转载 2015-04-15 16:59:21 · 787 阅读 · 0 评论 -
我的权限系统设计实现MVC4 + WebAPI + EasyUI + Knockout(四)授权代码维护
一、前言 权限系统设计中,授权代码是用来控制数据访问权限的。授权代码说白了只是一树型结构的数据,没有什么其它的业务意义。那么这个页面的功能也就非常简单授权代码维护:新增、修改、删除授权代码数据。二、正文 我们实际上就是要实现一个treegrid的增删改的功能,技术上很容易实现。 1、新建控制器 PermissionControlle.cspublic class P转载 2015-04-15 17:16:06 · 848 阅读 · 0 评论 -
5分钟快速开发之代码生成器(asp.net mvc4 + easyui + knockoutjs)
一、前言作为一个码农这么多年,一直在想怎么提高我们的编码效率,关于如何提高编码效率,我自己的几点体会1、清晰的项目结构,要编写代码的地方集中 2、实现相同功能的代码量少并且清晰易懂 3、重复或有规律的代码应该自动生成在这里我就讨论下代码生成的问题。二、关于代码生成器刚毕业时我也非常迷信代码生成器,喜欢在网上找一些代码生成器及相关的源码,喜欢在和网友讨转载 2015-04-15 17:20:35 · 965 阅读 · 0 评论 -
Knockout开发中文API系列5–绑定关键字
目的Visible绑定通过绑定一个值来确定DOM元素显示或隐藏示例"visible: shouldShowMessage"> You will see this message only when "shouldShowMessage" holds a true value. "text/javascript">转载 2015-05-26 14:48:57 · 605 阅读 · 0 评论 -
Knockout开发中文API系列1
Knockout开发中文API系列1从本节开始介绍关于KnockoutJs相关的内容,本节主要介绍knockoutjs一些重要特性与优点,以及它与Jquery等框架库之间的区别。1、Knockout.js是什么?Knockout是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良好的显示和编辑功能的用户转载 2015-05-26 14:44:00 · 499 阅读 · 0 评论 -
Knockout开发中文API系列4–监控属性数组
PS:这个翻译系列好久都没有更新了,实在是不应该,一方面是由于时间不多,另一方面也由于自身惰性太大,从今天起接着更新,会在最近的一月内把这个系列中文API文档翻译完整。如果你想侦测并响应一个对象的变化,你需要使用observables。如果你想侦测并响应一个集合对象的变化,你需要使用observableArray。这在很多情况下,都显得非常有用,比如你想操作UI上的一组数据,控制其显示或编转载 2015-05-26 14:46:28 · 595 阅读 · 0 评论 -
require.js+knockout.js+.underscore模板引擎的使用
第一种使用方式:HTML:ul data-bind="template: { name: 'peopleList' }">ul>script type="text/html" id="peopleList"> _.each(people(), function(person) { %> li> b data-bind="te转载 2015-05-26 14:51:29 · 650 阅读 · 1 评论 -
knockout.js模板绑定之利用Underscore.js模板引擎示例
View代码 1 h1>Peopleh1> 2 ul data-bind="template: { name: 'peopleList' }">ul> 3 4 script type="text/html" id="peopleList"> 5 _.each(people(), function(person) { %> 6 li> 7转载 2015-05-26 14:50:02 · 761 阅读 · 0 评论 -
Knockout开发中文API系列2–创建数据模型和监控属性
Knockout开发中文API系列2–创建数据模型和监控属性Observables,这个词的翻译来自汤姆大叔,对于部分翻译不是很准确的,欢迎大家留言,以得到更好的翻译。Knockout是建立在以下3个核心功能之上的:1、 属性监控与依赖跟踪2、 声明式绑定3、 模版机制在本节中,我们将学习3个核心里面的第一个。但在这之前,先让我们学习一下MVVM设转载 2015-05-26 14:44:44 · 479 阅读 · 0 评论 -
利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)
一、背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来。一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的。我们很开心的是easyui v1.3.4有自带default gray black bootstrap metro五款皮肤,但是它并不像bootsrap提供了很完整的css框架,不能提供项目需要的所有的css,所以还需要自己编写控件之外的一些转载 2015-04-15 17:18:52 · 666 阅读 · 1 评论 -
一个共通的viewModel搞定所有的编辑页面-经典ERP录入页面(easyui + knockoutjs + mvc4.0)
前言我写代码喜欢提取一些共通的东西出来,之前的一篇博客中说了如何用一个共通的viewModel和简洁的后台代码做查询页面,所有的查询页面都要对应一个数据录入的编辑及查看明细的页面,那么今天我们就来实现这个页面,同样我们也要使用一个共通的viewModel完成前台UI与JSON数据交互的处理,同样以超简洁的后台代码来处理保存。需求分析我们先弄明白我们要做怎么样一个编辑的页面。转载 2015-04-15 17:10:36 · 1127 阅读 · 0 评论 -
Knockout应用开发指南 第三章:绑定语法(1)
第三章所有代码都需要启用KO的ko.applyBindings(viewModel);功能,才能使代码生效,为了节约篇幅,所有例子均省略了此行代码。1 visible 绑定目的visible绑定到DOM元素上,使得该元素的hidden或visible状态取决于绑定的值。例子div data-bind="visible: shouldShowM转载 2015-04-07 15:50:53 · 285 阅读 · 0 评论 -
Knockout应用开发指南 第三章:绑定语法(2)
7 click 绑定目的click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在button,input和连接a上,但是可以在任意元素上使用。例子div> You've clicked span data-bind="text: numberOfClicks">span> times转载 2015-04-07 15:52:10 · 353 阅读 · 0 评论 -
Knockout应用开发指南 第八章:简单应用举例(2)
5 Control types这个例子,对view model没有什么特殊的展示,只是展示如何绑定到各种元素上(例如,select, radio button等)。 代码: ViewView Code代码: View modelvar viewModel = { stringValue: ko.observable("He转载 2015-04-07 16:05:21 · 355 阅读 · 0 评论 -
Knockout中ViewModel与Model的互转
在我们平常的开发当中使用频率最多的就是CRUD(添加、更新、删除、查询)。 而“添加”和“编辑”操作又是整个数据源的入口,在整个CRUD中占有非常重要的地位。常规情况下我们做一个编辑操作时,首先需要将实体对象从数据库中提取出来并将其值展示在页面上供用户进行编辑。用户编辑完成之后点击提交按钮时我们需要再将实体对象的值从页面中提取出来,并组成一个完整的实体对象提后交到后台进行处理。 那么转载 2015-04-07 15:43:30 · 883 阅读 · 0 评论 -
Knockout应用开发指南 第五章:创建自定义绑定
创建自定义绑定你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等)。你可以你封装复杂的逻辑或行为,自定义很容易使用和重用的绑定。例如,你可以在form表单里自定义像grid,tabset等这样的绑定。重要:以下文档只应用在Knockout 1.1.1和更高版本,Knockout 1.1.0和以前的版本在注册API上是不同的。 注册转载 2015-04-07 15:53:29 · 401 阅读 · 0 评论 -
Knockout应用开发指南 第七章:Mapping插件
Mapping插件Knockout设计成允许你使用任何JavaScript对象作为view model。必须view model的一些属性是observable的,你可以使用KO绑定他们到你的UI元素上,当这些observable值改变的时候,这些UI元素就会自动更新。绝大多数程序都需要从服务器端获取数据,但是由于服务器不知道observable的概念是什么,它只支持简单的Java转载 2015-04-07 16:01:58 · 442 阅读 · 0 评论 -
Knockout应用开发指南 第十章:更多信息(完结篇)
1 浏览器支持Knockout在如下浏览器通过测试:Mozilla Firefox 2.0+(最新测试版本:3.6.8)Google Chrome(通过Windows and Mac 下的version 5测试;其它低版本也该可以工作)Microsoft Internet Explorer 6, 7, 8Apple Safari(Windows下的Safari 5测试,Mac转载 2015-04-07 16:08:42 · 294 阅读 · 0 评论 -
Knockout应用开发指南 第九章:高级应用举例
1 Contacts editor这个例子和微软为演示jQuery Data Linking Proposal例子提供的例子一样的提供的,我们可以看看Knockout实现是难了还是容易了。代码量的多少不重要(尽快Knockout 的实现很简洁),重要的看起来是否容易理解且可读。查看HTML源代码,看看如何实现的view model以及绑定的。 代码:转载 2015-04-07 16:07:06 · 394 阅读 · 0 评论 -
Knockout应用开发指南 第八章:简单应用举例(1)
本章展示的4个例子主要是利用了Knockout的基本语法特性,让大家感受到使用Kncokout的快感。1 Hello world这个例子里,2个输入框都被绑定到data model上的observable变量上。“full name”显示的是一个dependent observable,它的值是前面2个输入框的值合并一起的结果。 无论哪个输入框更新,都会看到“转载 2015-04-07 16:04:02 · 327 阅读 · 0 评论 -
Knockout应用开发指南 第六章:加载或保存JSON数据
加载或保存JSON数据Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地存储需要序列化数据),交换数据最方便的就是使用JSON格式 – 大多数的Ajax应用程序也是使用这种格式。 加载或保存数据Knockout不限制你用任何技术加载和保存数据。你可以使用任何技术和服务器来交互。用的最多的是使用jQuery转载 2015-04-07 15:55:31 · 577 阅读 · 0 评论 -
Knockout介绍
介绍:Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化。如果你还不了解Knockout是啥,先请看一下微软MIX11大会上的一段视频连接地址:http://channel9.msdn.com/Events/MIX/MIX11/FRM08或者直接运行下面的代码看看效果:View Code 插件:K转载 2015-04-07 16:13:12 · 461 阅读 · 0 评论 -
Knockout应用开发指南 第二章:监控属性(Observables)
关于Knockout的3个重要概念(Observables,DependentObservables,ObservableArray),本人无法准确表达它的准确含义,所以暂定翻译为(监控属性、依赖监控属性和监控数组),如果有好的建议请指正,多谢。1 创建带有监控属性的view modelObservablesKnockout是在下面三个核心功能是建立起来的:转载 2015-04-07 15:48:42 · 312 阅读 · 0 评论 -
Knockout应用开发指南 第三章:绑定语法(3)
12 value 绑定目的value绑定是关联DOM元素的值到view model的属性上。主要是用在表单控件,和上。当用户编辑表单控件的时候, view model对应的属性值会自动更新。同样,当你更新view model属性的时候,相对应的元素值在页面上也会自动更新。注:如果你在checkbox或者radio button上使用checked绑定来读取或者写转载 2015-04-07 15:52:49 · 427 阅读 · 0 评论 -
Knockout应用开发指南 第四章:模板绑定
模板绑定The template binding目的template绑定通过模板将数据render到页面。模板绑定对于构建嵌套结构的页面非常方便。默认情况, Knockout用的是流行的jquery.tmpl模板引擎。使用它的话,需要在安装页面下载和引用jquery.tmpl和jQuery框架。或者你也可以集成其它的模板引擎(虽然需要了解Knockout 内部知识才行)。转载 2015-04-07 15:53:37 · 612 阅读 · 0 评论 -
用Javascript评估用户输入密码的强度(Knockout版)
早上看到博友6点多发的一篇关于密码强度的文章(连接),甚是感动(周末大早上还来发文)。我们来看看如果使用Knockout更简单的来实现密码强度的验证。原有代码请查看:View Code 首先我们来改善一下上面博友的验证函数为如下代码:var Page = Page || {};Page.Utility = Page.Utility || {};转载 2015-04-07 16:09:48 · 288 阅读 · 0 评论 -
JS库Knockout在Asp.net MVC 4.0中的简单应用
简介这篇文章将向大家介绍一下如何在ASP.NET MVC 4.0下如何使用Knockout JS和如何使用一种可以帮助我们写出更高维护度的JS基本模式。这里我用到的实例,最适用于SAP 的开发(详细信息见:single-page application)。但是knockout JS的使用范围却不仅限于于此。你可以根据你的需求,把它使用到任何asp.net MVC 的程序开发中。背景转载 2015-04-08 10:11:13 · 1052 阅读 · 0 评论 -
说说我的B/S开发框架(asp.net mvc + web api + easyui)
前言这些年一直在.net下做企业web系统开发,前前后后经历的不同的开发框架有五六个之多,一直想有一个比较简单灵活顺手的BS开发框架,网上也没有找到一个比较合适的能应用于企业系统开发的。去年辞职在家的时候,网上找了些东西,按照自己的想法实现一些东西,慢慢的形成现在的B/S开发框架。想接下来慢慢的写出来和大家共享下,这里面很多都是我自己的想法,并没有什么高深的设计模式,欢迎大家拍砖。转载 2015-04-15 17:08:05 · 1340 阅读 · 1 评论 -
Knockout开发中文API系列3–使用计算属性
计算属性如果你已经有了一个监控属性 firstName和lastName,如果你想显示全名该怎么做呢?这个时候你就可以通过计算属性来实现,这个方法依赖于一个或多个监控属性,如果任何依赖对象发生改变他们就会跟着改变。例如,下面的 view model:function AppViewModel() { this.firstName = ko.obs转载 2015-05-26 14:45:48 · 1013 阅读 · 0 评论