Knockoutjs开发指南

89570797 2015-03-11

关于该系列文章：
本系列文章共份10个章节（13篇），主要是翻译官方站点教程文章，然后加了一些自己的理解。有任何技术点不明白或者需要讨论的，欢迎大家留言拍砖。

目录：

Knockout应用开发指南 第一章：入门

Knockout应用开发指南 第二章：监控属性(Observables)

Knockout应用开发指南 第三章：绑定语法（1）

Knockout应用开发指南 第三章：绑定语法（2）

Knockout应用开发指南 第三章：绑定语法（3）

Knockout应用开发指南 第四章：模板绑定

Knockout应用开发指南 第五章：创建自定义绑定

Knockout应用开发指南 第六章：加载或保存JSON数据

Knockout应用开发指南 第七章：Mapping插件

Knockout应用开发指南 第八章：简单应用举例（1）

Knockout应用开发指南 第八章：简单应用举例（2）

Knockout应用开发指南 第九章：高级应用举例

Knockout应用开发指南 第十章：更多信息

更多例子：

用Javascript评估用户输入密码的强度（Knockout版）

感谢：http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html

89570797

89570797

相关推荐

KnockoutJS数组比较算法实例详解

前端开发中，数组是一种非常有用的数据结构。这篇博客会解释并分析KnockoutJS实现中使用的数据比较算法。KnockoutJS使用MVVM的思想，view model中的数组元素会对应data model中的数组数据，当用户进行输入或者请求后台时，数组数

85931734 / 0评论 2019-11-25

Front End Start(4)knockoutjs Paged List and Creation

Front End Start(4)knockoutjs Paged List and Creationknockoutjs CRUDhttp://sillycat.iteye.com/blog/2152090http://sillycat.iteye.c

88901533 / 0评论 2014-11-06

PS抠图神器：KnockOut 2.0汉化版下载及教程

Kockout 为Corel公司开发，是一款相当强大的Photoshop插件，该软件利用配合Photoshop滤镜使用，在图像输出上会简化许多，尤其是Kockout2.0版本处理完后不用存盘就可直接返回Photoshop下进行编辑，不但能够满足常见的抠图需

85580894 / 0评论 2014-04-02

KnockoutJS

Knockout是一个以数据模型为基础的能够帮助你创建富文本，响应显示和编辑用户界面的JavaScript类库。任何时候如果你的UI需要自动更新，KO能够很简单的帮你实现并且很容易维护。灵活全面的模板- 使用嵌套模板可以构建复杂的动态界面。纯JavaScr

89570797 / 0评论 2016-05-31

Knockoutjs开发指南

关于该系列文章：本系列文章共份10个章节（13篇），主要是翻译官方站点教程文章，然后加了一些自己的理解。有任何技术点不明白或者需要讨论的，欢迎大家留言拍砖。Knockout应用开发指南 第一章：入门。Knockout应用开发指南 第六章：加载或保存JSON

80961131 / 0评论 2015-03-11

Knockout应用开发指南之监控属性(Observables)

在这之前， 我们来解释一下MVVM模式和view model的概念。Model-View-View Model 是一种创建用户界面的设计模式。描述的是如何将复杂的UI用户界面分成3个部分：。◆ model: 你程序里存储的数据。保持view model抽

87941631 / 0评论 2015-02-10

knockoutjs 3.2 模块化开发笔记

npm install yo -g. npm install generator-ko -g. yo xxxx. --> type: yyyy. --> type: 1. add a component:. yo ko:component zz

89233916 / 0评论 2015-01-14

十个有用的knockout binding用法

Knockout.js is a very powerful library to build interactive web applications in. The creators of knockout tried really hard to k

89233916 / 0评论 2015-01-07

select2 集成knockoutjs

var options = ko.toJS(valueAccessor()) || {};$(element).select2(options);}, 0);return item[lookupKey] === value;}));$(element).s

89570797 / 0评论 2014-12-31

Front End Start(4)knockoutjs Paged List and Creation

Front End Start(4)knockoutjs Paged List and Creationknockoutjs CRUDhttp://sillycat.iteye.com/blog/2152090http://sillycat.iteye.c

87941631 / 0评论 2014-11-06

Front End Starter(3)knockout - Form and Post

tutorial=loadingsavingTask List ExampleLoading the Data from Server Side<h3>Tasks</h3><form data-bind="submi

89233916 / 0评论 2014-11-04

Front End Starter(2)knockout - Introduction and List

Front End Starter(2)knockout - Introduction and ListFollow the Doc Herehttp://learn.knockoutjs.com/#/?tutorial=intro1. Knockout

80961131 / 0评论 2014-11-03

knockout, emberjs, angular, avalon比较

avalon是一个迷你的MVVM框架，虽然从发布到现在，它臌胀了不少，但它现在还是比knockout小许多。avalon开发过程一直遵循三个原则：1，复杂即错误，2，数据结构优于算法，3，出奇制胜。这三大原则保证avalon具有良好的维护性，扩展性，与众不

89433869 / 0评论 2014-09-11

Knockoutjs demo

<html> <head> <title></title> </head> <body> <p>First Name:<Strong data-bind=&quo

89570797 / 0评论 2013-08-24

knockoutjs 变量引用方式、怪异问题排查

即相关画面效果没有跟着动态变化。从javascript控制台中查看是否有脚本错误，脚本错误可能会导致knockoutjs后续脚本不执行在表达式中引用变量值时，必须以方法调用的方式来引用，不能直接使用变量名的方式来引用，不然可能导致上述问题！！！移除无关控件

88901533 / 0评论 2012-08-24

knockoutjs -- if 绑定

If绑定用来控制一部分html标签是否生成在DOM树中。只有if的条件表达式等于true，那么对应的html才会被输出，否则不会被输出到客户端。If绑定和visible绑定类似，不同之处在于：对于visible绑定，包含的html标签内容一直会存在在DOM

87941631 / 0评论 2012-06-14

在knockoutjs 上自己实现的flux(实例讲解)

在knockoutjs 上实现 Flux 单向数据流 状态机，主要解决多个组件之间对数据的耦合问题。flux的设计理念和实现方案，很大程度上人借鉴和参考了Vuex的实现，只是简化了某些过程，数据流向图如下：。从上图，中以看出数据的改变是单向循环的。Vuex

89901038 / 0评论 2017-12-18

knockoutjs模板实现树形结构列表

之前已经写过用Vue实现图上效果的方法，此篇为用knockout.js实现上图效果的方法，同样通过模板将数据绑定到页面。

89901038 / 0评论 2017-07-31

KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定

textInput绑定主要用于<input>或者<textarea>元素。他提供了DOM和viewmodel的双向更新。不同于value绑定，textinput绑定是实时更新的。虽然value结合也可以进行双向文本框和视图模型性能的

85971631 / 0评论 2019-05-08

KnockoutJS 3.X API 第四章之数据控制流component绑定

只传递一个字符串作为组件名称，比提供任何参数。<div data-bind='component: "my-component"'></div>如果你觉得这种写法有些死板的话，也可以传递一个监控属性，用其值作为组

85580894 / 0评论 2016-10-10

KnockoutJS 3.X API 第四章之数据控制流with绑定

使用with绑定的格式为data-bind=”with:attribute”,使用with绑定会将其后所跟的属性看作一个新的上下文进行绑定。with绑定内部的所有元素将受到该上下文的约束。当然，with绑定也可配合if或foreach绑定一起使用。<

85981730 / 0评论 2016-10-10

KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定

if绑定一般是格式是data-bind=if:attribute,if后所跟属性或表达式的值应为bool值，if绑定的作用与visible绑定的作用类似。可控制DOM的显示与隐藏，不一样的地方是，if绑定是物理删除或添加DOM元素。<div data

85971631 / 0评论 2016-10-10

KnockoutJS 3.X API 第四章之数据控制流foreach绑定

假设你有一个监控属性数组，每当您添加，删除或重新排序数组项时，绑定将有效地更新UI的DOM-插入或去除相关项目或重新排序现有的DOM元素，不影响任何其他的DOM元素。当然，也可以配合其他控制流一起适用，例如if和with。<button data-b

87941631 / 0评论 2016-10-10

KnockoutJS 3.X API 第四章之click绑定

click绑定主要作用是用于DOM元素被点击时调用相关JS函数。最常见用于button、input、a元素。备注，click后所跟的并不一定非得是视图模型的函数。可以是任何对象的函数，直接引用即可。// The current item will be p

89570797 / 0评论 2016-10-10

KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定

Knockout是一个以数据模型为基础的能够帮助你创建富文本，响应显示和编辑用户界面的JavaScript类库。任何时候如果你的UI需要自动更新，KO能够很简单的帮你实现并且很容易维护。submit绑定即为提交绑定，通常用于form元素。这种绑定方式会打断

87520195 / 0评论 2016-10-10

KnockoutJS 3.X API 第四章之表单value绑定

Knockout是一个以数据模型为基础的能够帮助你创建富文本，响应显示和编辑用户界面的JavaScript类库。任何时候如果你的UI需要自动更新，KO能够很简单的帮你实现并且很容易维护。声明式绑定 - 浅显易懂的方式将你的用户界面指定部分关联到你的数据模型

89901038 / 0评论 2016-10-10

KnockoutJS 3.X API 第四章之事件event绑定

event绑定即为事件绑定，即当触发相关DOM事件的时候回调函数。例如keypress，mouseover或者mouseout等。<div data-bind="event: { mouseover: enableDetails, mous

88991534 / 0评论 2016-10-10

Knockout结合Bootstrap创建动态UI实现产品列表管理

本篇文章结合Bootstrap创建一个比较完整的应用，对产品列表进行管理，包括产品的增加、删除、修改。<input type="button" class="btn" value="修改"

85580894 / 0评论 2016-09-14

knockoutjs动态加载外部的file作为component中的template数据源的实现方法

玩过knockoutjs的都知道，有一个强大的功能叫做component，而这个component有个牛逼的地方就是拥有自己的viewmodel和template，比如下面这样：。});很显然，viewmodel就是function函数区，而templat

88991534 / 0评论 2016-09-01

深入浅析knockout源码分析之订阅

Knockout是一款很优秀的JavaScript库，它可以帮助你仅使用一个清晰整洁的底层数据模型即可创建一个富文本且具有良好的显示和编辑功能的用户界面。任何时候你的局部UI内容需要自动更新，KO都可以很简单的帮你实现，并且非常易于维护。

83921038 / 0评论 2016-07-12

Knockoutjs 学习系列(二)花式捆绑

在上一篇Knockoutjs 学习系列(一)ko初体验文章中提到，ko中的 data-bind = "XX：OO"绑定大法除了可以绑定text、value等内容，还可以绑定visible、style等外观属性，也可以绑定click、te

85580894 / 0评论 2016-06-07

Knockoutjs 学习系列(一)ko初体验

MVVM框架中Angular是好，但这么大而全的框架，学习难度可不低呢，上手起码也得要个一两周吧。而knockoutjs专注于数据绑定，只需一两天就可以投入使用了，学习成本不要太低！在前端进化如此迅速的时代，学习成本也是不得不考虑的一个因素。很多时候其实我

85931734 / 0评论 2016-06-07

KnockoutJs快速入门教程

之前这个系列文章已经介绍Bootstrap，详情请查看本文： 《Bootstrap入门教程》 ，由于最近项目中，前端是Asp.net MVC + KnockoutJs + Bootstrap来做的。所以我又重新开始写这个系列。今天就让我们来看看Web前端的

85981730 / 0评论 2016-05-16

BootstrapTable与KnockoutJS相结合实现增删改查功能【二】

在上篇文章给大家介绍了BootstrapTable与KnockoutJS相结合实现增删改查功能，介绍了下knockout.js的一些基础用法。接下来通过本文继续给大家介绍。如果你也打算用ko去做项目，且看看吧！只要在标签中加上合适的属性即可。Knockou

85971631 / 0评论 2016-05-10

BootstrapTable与KnockoutJS相结合实现增删改查功能【一】

Bootstrap是一个前端框架，解放Web开发者的好东东，展现出的UI非常高端大气上档次，理论上可以不用写一行css。只要在标签中加上合适的属性即可。KnockoutJS是一个JavaScript实现的MVVM框架。比如列表数据项增减后，不需要重新刷新整

80961131 / 0评论 2016-05-10

Bootstrap与KnockoutJs相结合实现分页效果实例详解

KnockoutJS是一个JavaScript实现的MVVM框架。比如列表数据项增减后，不需要重新刷新整个控件片段或自己写JS增删节点，只要预先定义模板和符合其语法定义的属性即可。简单的说，我们只需要关注数据的存取。由于最近公司的系统需要改版，改版的新系统

hllinc / 0评论 2016-05-03

Knockout自定义绑定创建方法

// This will be called when the binding is first applied to an element. // Set up any initial state, event handlers, etc. here.

ElementZW / 0评论 2015-12-26

认识Knockout及如何使用Knockout绑定上下文

Knockout简称ko，是一个轻量级的javascript类库，采用MVVM设计模式，简单优雅的实现了双向绑定，实时更新，帮助您使用干净的数据模型来创建丰富的、响应式的用户界面。$index它是一个在foreach绑定中的数组的从0开始的索引条目。不想其

89153052 / 0评论 2015-12-25

Knockoutjs的环境搭建教程

</script> 然后使用浏览器打开此html文件，即可看到"Hello World!!</script> 在script中定义了一个AppViewModel，然后为其定义了一个变量：helloWorld，它的值为：He

88901533 / 0评论 2012-11-26

ko knockoutjs动态属性绑定技巧应用

knockoutjs 简称 ko ko的动态属性是指，ViewModel不确定的属性，而后期却需要的属性。什么是不确定属性，比如ListModel如果 编辑某一项，想把这一项的状态变更为Edit。数据并不包括Edit属性，mvvm绑定时，会发现报错。那么一

88991534 / 0评论 2012-11-14

用Javascript评估用户输入密码的强度（Knockout版）

我们来看看如果使用Knockout更简单的来实现密码强度的验证。原有代码请查看： 代码如下：。输入密码:<input type="password" size="10" onkeyup="pwStre

83921533 / 0评论 2011-11-30

Knockout应用开发指南之Mapping插件

绝大多数程序都需要从服务器端获取数据，但是由于服务器不知道observable的概念是什么，它只支持简单的JavaScript对象，mapping插件可以让你很方便地将简单JavaScript对象mapp到带有observable值的view model。

85981730 / 0评论 2012-01-04

Knockout应用开发指南之载或保存JSON数据

Knockout可以实现很复杂的客户端交互，但是几乎所有的web应用程序都要和服务器端交换数据，交换数据最方便的就是使用JSON格式 – 大多数的Ajax应用程序也是使用这种格式。Knockout不限制你用任何技术加载和保存数据。用的最多的是使用jQuer

85971631 / 0评论 2012-01-04

Knockout应用开发指南之Hello World

本章展示的4个例子主要是利用了Knockout的基本语法特性，让大家感受到使用Kncokout的快感。这个例子里，2个输入框都被绑定到data model上的observable变量上。“full name”显示的是一个dependent observab

83921038 / 0评论 2011-12-05

Knockout应用开发指南之创建自定义绑定

你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定。你可以你封装复杂的逻辑或行为，自定义很容易使用和重用的绑定。例如，你可以在form表单里自定义像grid，tabset等这样的绑定。重要：以下文档只应用在Knockout 1.1.1和更高版本，K

87941631 / 0评论 2011-12-05

Knockout应用开发指南之模板绑定

template绑定通过模板将数据render到页面。模板绑定对于构建嵌套结构的页面非常方便。默认情况， Knockout用的是流行的jquery.tmpl模板引擎。使用它的话，需要在安装页面下载和引用jquery.tmpl和jQuery框架。或者你也可以

89233916 / 0评论 2011-12-05

Knockout应用开发指南之监控属性(Observables)

在这之前， 我们来解释一下MVVM模式和view model的概念。Model-View-View Model 是一种创建用户界面的设计模式。描述的是如何将复杂的UI用户界面分成3个部分：。◆ model: 你程序里存储的数据。保持view model抽

89901038 / 0评论 2011-11-29

Knockout应用开发指南之入门介绍

Knockout是一个轻量级的UI类库，通过应用MVVM模式使JavaScript前端UI简单化。◆ 声明式绑定 ：使用简明易读的语法很容易地将模型数据关联到DOM元素上。◆ UI界面自动刷新 ：当您的模型状态改变时，您的UI界面将自动更新。Knockou

80961131 / 0评论 2011-11-29

Knockout text绑定DOM的使用方法

使用函数或者表达式来决定text值继续在上面的ViewModel中添加一个属性，并且添加一个依赖监控属性代码如下：。</i>");它不会显示斜体字，而是原样输出标签。如果你需要显示HTML内容，请参考html绑定.关于IE 6的白空格

漫漫长路 / 0评论 2013-11-15