根据汤姆大叔博客总结-笔记: =============<script type="text/javascript"> $(function () { var ViewModel = function (first, last) { this.firstName = ko.observable(first); this.lastName = ko.observable(last); this.fullName = ko.pureComputed(function () {…

关于knockout学习系列的文章已经写完,这里主要是做个总结,并且将目录罗列出来,方便查看.欢迎各位大神拍砖和讨论. 总结 kncokout是一个轻量级的UI类库,通过MVVM模式使前端的UI简单话,减少javascript代码的编写.通常说到javascript类库,首先都会想到jquery,jquery通过对js的封装实现了:write less,do more,它可以帮助我们减少很多代码,解决浏览器兼容问题:代码量减少了,维护成本也就降低了.knockout与jquery并不冲突,而且可…

原创纯手写快速学习笔记(对官方文档的二手理解),更推荐有时间的话读官方文档 框架简介(Knockout版本:3.4.1 ) Knockout(以下简称KO)是一个MVVM(Model-View-View Model)框架,这是一种设计用户界面的设计模式,把一个复杂的UI分成三个部分:模型(Model),视图(View),视图模型(View Model).以下解释这三个模型的含义: 模型(Model):你的应用中存储的数据.这些数据与UI是独立的.我们常向服务器发请求,从而得到数据改变模型存储的数…

通常来说,前端的维护难度是比较大的,特别是脚本,虽然像jquery这样的库可以帮助我们减少很多代码,但在稍微复杂的情况下,还是会产生有很多代码.上一篇介绍了模板引擎jsRender,它可以帮我们快速生成html,减少代码的编写,增强代码的可阅读性和可维护性.但最后也说到,它还是不够强大. 一.mvvm 说到mvvm,就想到以前学过的wpf,虽然学得一般...,对比winform,wpf 里面有很多很好的设计和想法,标签控件.数据驱动.依赖属性... .更关键的是,它是以数据为核心,通过数据驱动U…

Web API从MVC4开始出现,可以服务于Asp.Net下的任何web应用,本文将介绍Web api在单页应用中的使用.什么是单页应用?Single-Page Application最常用的定义:一个最初内容只包含html和JavaScript,后续操作通过Restful风格的web服务传输json数据来响应异步请求的一个web应用.SPA的优势就是少量带宽,平滑体验,劣势就是只用JavaScript这些平滑的操作较难实现,不像MVC应用,我们可以异步form,partview.不用担心,我们…

1.  四大关键理念: A. DeclarativeBindings(声明式绑定) Easily associate DOM elements with model data using a concise, readable syntax 使用简单易读的语法方便地将模型数据与DOM元素绑定在一起 B. AutomaticUIRefresh(页面自动刷新) When your data model's state changes, your UI updates automatically C.…

参考: http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html http://knockoutjs.com/documentation/introduction.html 复习:AngularJS的数据绑定 显示文本 <p>{{greeting}}</p> <!-- 或者 --> <p ng-bind=”greeting”></p> 表单输入 <form ng-control…

简单的方式,使用 knockout.mapping.js. 1.引入knockout.mapping.js. 2.声明模型 var model = { task:null, feedbacks:[], feedbackPhotos:null } 3.mapping 绑定 var viewModel = ko.mapping.fromJS(model); 4.声明绑定 $(function() { ko.applyBindings(viewModel); initData(); }) 5.赋值 v…

在使用knockout绑定值的时候,发现无论怎么赋值都赋值失败,最后检查前端页面才发现,同一个属性绑定值的时候,绑定了两次,而在js中进行属性绑定的时候是双向绑定的,SO,产生了交互影响.谨记之. 并不是说同一个值不能再前端同时value两次,而是select有监听事件,当赋值时,会触发监听,导致双向绑定值总是为空.但还是尽量避免绑定多次. 另: 查看绑定方法,直接在控制台输出该值,如果是knockout函数方式,即为双向绑定,如果直接展示值,就需要查看一下赋值方式了.双向绑定的属性赋值用的是括…

使用knockout绑定数据时,需要进行判断处理 <!-- ko if:$root.ifHaveVideo($data) --> 这里不是被注释掉的代码 是逻辑判断代码 有效的 <div class="videoImgWrap"> <div class="video-wrap"> <video data-bind="attr:{src:JSON.parse(DETAIL_INFO).videoInfo.url}&q…

前面已经介绍了ko的基本用法,结合官方文档,基本就可以实际应用了.本章作为ko学习的最后一篇,实现一个简单的demo.主要集中在ko,所以后台数据都是静态的.类似于博园,有一个个人文章的分类列表,一个文章列表.可以在文章最后下载工程源代码(包括之前demo的代码).实现效果图如下: 一.准备数据 分类信息Kind: public class Kind { public string Url { get; set; } public string Name { get; set; } public…

以下是我从Google上找到的一个例子,非常生动形象,我修改了部分代码,具体内容如下: 对于$root 与$parent的区别: $root refers to the view model applied to the DOM with ko.applyBindings; 译:$root 是指ViewModel所应用于ko.applyBindings时所使用的DOM; $parent refers to the immediate outer scope;  译:$parent 是指当前DOM…

在绑定event的时候,需要传入ViewModal 本身的属性值(其实没必要,js直接能获取到,此处为测试相关参数的传递),如果不加(),会将绑定的function传进event(至于为嘛传了个function进去,可以查看ko绑定原理)…

注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是将 M 和 V 的实现代码分离,从而使同一个程序可以使用不同的表现形式. 交互方式(所有通信都是单向的): View 传送指令到 Controller Controller 完成业务逻辑后,要求 Model 改变状态 Model 将新的数据发送到 View,用户得到反馈 更详细的说明: 模型(Mod…

计算属性 konckout.js的API文档,写的极为详细和生动,透过MVVM的运作原理,开发时只需专注于定义ViewModel逻辑,不需耗费心力处理TextBox.Select的onchange.onclick等互动细节,就能达到UI元素与数据天人合一的境界.这一系列的konckout学习笔记,将逐一探讨knockout.js在常见网页情境上的应用.  Knockout.js随手记(1)开篇已经示范过最简单的应用,为<input>与<span>加上data-bind宣告,透过ko…

敬告读者:因为是事件驱动模式的高速学习,高速学习意味着,不系统,不科学,不合逻辑,不一定正确.所以要是有不对的地方,页面下面留言给我,跪谢! 背景介绍: 最近在公司的开发工作中,接手了从别的公司交代过来的代码巨怪,其中主要的技术有 WPF,控制反转框架Spring.net,SqlMap(有点像是ibatis.net),Remoting,作业调度框架Quarz,我们的工作,是把这只怪兽,敲碎,重组并且优化,目标暂时是重构成WebAPI底层和WPF界面两个部分,下面是我学习WPF的过程中,留下的一些…

学习KnockOut第三篇之List 欲看此篇---------------------------------------------可先看上篇.          第一步,先搭建一个大概的框架起来.至于绑定什么的,我们稍后慢慢进行.可能会有人问为什么我那个位置要写一个form,关于这个呢,且埋一伏笔,稍后说明原由. 我们要做的是,当点击“Add”按钮时能将文本框里的值加入的下拉框里,当我们选中下拉框里的选项时点击"Remove"也能进行删除操作,同样,当点击“Sort”时也能对下拉…

                                                                    学习KnockOut第二篇之Counter        欲看此篇,必先----------------------------------------------------------------------------------看上篇.        先说好了,只是学习笔记. 第一步.先写一个简单的text绑定吧.先写VM,再写激活代码,最后写V,那样V…

学习KnockOut第一篇之Hello World 笔者刚开始学习KnockOut.写的内容就相当于一个学习笔记.且在此处向官网致敬,比较喜欢他们家的Live Example版块,里面有jsFiddle.至于文档,辅导章节,也是有的.附上地址:KnockOut.感兴趣的话可以看一下的. 那么,开始.        先写一个连Hello World级别都算不上的.看了文档,貌似很简单的样子.       第一步引进ko的js脚本.第二步创建一个ViewModel.第三步创建一个简单的View,用d…

[MVC]bootstrap-paginator 分页插件笔记   bootstrap-paginator基于bootstrap框架,使用起来非常简单.官网:http://harttle.github.io/bootstrap-paginator/ 在bootstrap框架下只需要引入一个bootstrap-paginator.js <script src="~/Content/js/bootstrap-paginator.min.js"></script> h…

1 Computed 首先,创建一个view model如下: <body> <p>The fullname is: <span data-bind="text: fullName"></span></p> </body> <script> function MyViewModel() { this.firstName = ko.observable("Chiaki"); this.…

Visible Visible binding会依据绑定的数据来决定相应的DOM元素是否隐藏,hidden或visible. 我们首先在js文件部分定义一个view model,这里我创建的是一个object而不是一个构造函数,个人分析认为,object类型的定义就是一种persistent view model,而构造函数类型的定义就是一种temporary view model,这个也许和pure computed observables中的性能有关,可和knockout学习笔记(四)联系起…

作为一名初学者来说,一篇篇的按顺序看官网上的文档的确是一件很痛苦的事情,毕竟它的排列也并非是由浅及深的排列,其中的顺序也颇耐人寻味,于是这篇文章我又跳过了Reference部分,进而进入到具体的bindings环节,首先接触到的是Controlling text and appearance. Visible binding会依据绑定的数据来决定相应的DOM元素是否隐藏. 我们首先在js文件部分定义一个view model,这里我创建的是一个object而不是一个构造函数,个人分析认为,obje…

C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替原则.依赖倒置原则.接口隔离原则.合成复用原则和迪米特法则.下面就分别介绍了每种设计原则. 1.1 单一职责原则 就一个类而言,应该只有一个引起它变化的原因.如果一个类承担的职责过多,就等于把这些职责耦合在一起,一个职责的变化可能会影响到其他的职责.另外,把多个职责耦合在一起,也会影响复用性. 1.…

目录 跨平台编程技术选型 ## 需求 最终选定的技术方案:uni-app 混合或跨平台编程相关资料 ## uni-app 官网 相关资料 个人笔记 个人经验 ## taro 官网 相关资料 ## Chameleon 官网 相关资料 Weex 官网 相关资料 EROS Ui Flutter 相关资料 ## NativeScript 官网 相关资料 ## React Native 相关资料 ReactXP Xamarin Swift & Kotlin Swift & Kotlin 参考资料 K…

这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file>,注意,可反复多次使用,添加多个文件:// 第二步,使用命令git commit,完成. 2.修改文件 git status命令可以让我们时刻掌握仓库当前的状态,上面的命令告诉我们,readme.txt被修改过了,但还没有准备提交的修改. git diff顾名思义就是查看difference,显示的格…

之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者服务器 一.安装webpack 你需要之前安装node.js $ npm install webpack -g 安装成功后,便可以使用webpack命令行了. ok,开始工作! 二.新建一个空目录,名字为myApp,文件如下 entry.js document.write("It works.&qu…

SQL Server技术内幕笔记合集 发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕 笔记http://www.cnblogs.com/lyhabc/articles/3914213.html Microsoft SQL Server 2005技术内幕:T-SQL查询笔记http://www.cnblogs.com/lyhabc/articles/3912608.html Microsoft SQL Server 2…

也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序一样.特别是在当今的移动时代,单页程序如果放在移动设备上去浏览就能够拥有像native app一样的体验,也许我们web开发者们应该期待这种技术的大力普及,这样不管前端还是后端都是我们的天下啊,让那些Andrioid和IOS开发者们追赶我们吧!好吧,废话不说了,我们会从0开始搭建这样一个单页的web…

1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 3.  UML类图 4.  思维导图 (右键查看图片可放大) 5.  PHP代码 我已经把有关这部分PHP代码,上传到git.oschina.net上,可以在 https://git.oschina.net/andywww/myTest 的文件夹template_Study下看到相关的完整代码. templa…