Knockout.js 整理

上个月做项目需要用到easyui和Knockout.js ，所以简单的整理了下，以便学习

Knockout.js 是一个JavaScript库，它可以让HTML控件很容易与数据进行绑定。使用的是“模型-视图-视图-模型（MVVM）”模式。对于分离前台的业务逻辑和视图简化数据绑定过程有很好的作用。

重要概念
1、声明式绑定：将模型数据关联到dom元素上
2、Ui界面自动刷新：模型改变，ui自动刷新
3、依赖跟踪：为转变和联合数据，在模型数据之间隐式建立关系
4、模板：为模型数据快速编写可嵌套的ui

正确的引用顺序：

<script type='text/javascript' src='jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='jquery-tmpl.js'></script>
<script type='text/javascript' src='knockout-1.2.1.js'></script>

一、创建一个view model，只需要声明任意的JavaScript object。例如：

var myViewModel = {personName: ko.observable('Bob'),personAge: ko.observable(123)
};

可以为view model创建一个声明式绑定的简单view。下面的代码显示personName 值：

The name is <span data-bind="text: personName"></span>

data-bind属性不是HTML的原生属性需要激活Knockout 来让他起作用。
ko.applyBindings(myViewModel);这个代码块放在HTML底部，或者放在jQuery的$函数或者ready 函数里

一、监控属性（observable）
1 、读取监控属性（observable）的值，只需要直接调用监控属性（observable）（不需要参数），例如myViewModel.personName() 将返回’Bob’, myViewModel.personAge() 将返回 123。
2、写一个新值到监控属性（observable）上，调用这个observable属性并当新值作为参数。例如：调用 myViewModel.personName(‘Mary’) 将更新name值为’Mary’。
3、给一个model对象的多个属性写入新值，你可以使用链式语法。例如： myViewModel.personName(‘Mary’).personAge(50) 将会将name更新为 ‘Mary’ 并且将age更新为 50.

二、依赖监控属性(Dependent Observables)
例如，下面的view model,

var viewModel = {firstName: ko.observable('Bob'),lastName: ko.observable('Smith')
};

可以添加一个依赖监控属性来返回姓名全称：

viewModel.fullName = ko.dependentObservable(function () {return this.firstName() + " " + this.lastName();
}, viewModel);

并且绑定到UI的元素上，例如：

The name is <span data-bind="text: fullName"></span>

不管firstName还是lastName改变，全称fullName都会自动更新

例:过滤并验证用户输入

read — 必选，一个用来执行取得依赖监控属性当前值的函数。
- write — 可选，如果声明将使你的依赖监控属性可写，别的代码如果这个可写功能写入新值，通过自定义逻辑将值再写入各个基础的监控属性上。
- owner — 可选，如果声明，它就是KO调用read或write的callback时用到的this。查看“管理this”获取更新信息。

3、监控数组（observableArray）
监控数组跟踪的是数组里的对象，而不是这些对象自身的状态。

操作observableArray：
anotherObservableArray.push(‘Some new value’) 在数组末尾添加一个新项
anotherObservableArray.pop() 删除数组最后一个项并返回该项
anotherObservableArray.unshift(‘Some new value’) 在数组头部添加一个项
anotherObservableArray.shift() 删除数组头部第一项并返回该项
anotherObservableArray.reverse() 翻转整个数组的顺序
anotherObservableArray.sort() 给数组排序(默认按照字符排序或者数字排序)。
anotherObservableArray..remove(someItem) 删除所有等于someItem的元素并将被删除元素作为一个数组返回
anotherObservableArray.remove(function(item) { return item.age < 18 }) 删除所有age属性小于18的元素并将被删除元素作为一个数组返回
anotherObservableArray..removeAll([‘Chad’, 132, undefined]) 删除所有等于’Chad’, 123, or undefined的元素并将被删除元素作为一个数组返回

Knockout绑定语法：
1、visible 绑定 ——-使得该元素的hidden和visible状态取决于绑定的值
2、Text 绑定 ———使得该元素显示的文本值为绑定的参数（多用于显示上）
3、Html 绑定 ———-使得该元素现实的html值为绑定的参数
4、Css 绑定 ———-添加或删除一个或多个CSS 样式至DOM元素上
5、Style 绑定 ———-添加或删除一个或多个style样式至DOM元素上
6、attr 绑定 ———提供了一种方式可以设置DOM元素的任何属性（例如src、herf）
7、Click 绑定 ———–在DOM元素上添加事件以便元素被点击的时候执行定义的JavaScript 函数（多用于button、input、a）
8、Event 绑定 ———-在DOM元素上添加指定的事件以便元素被触发的时候执行定义的JavaScript 函数（多用于keypress，mouseover和mouseout上）
9、Submit 绑定 ———-在from表单上添加指定的事件以便提交时执行javaScript函数（只能用于from元素）
10、Enable 绑定 ———–使DOM元素只有在参数值为true时才enable(激活) （多用于input、select、textarea）
11、Disable 绑定 ———–使DOM元素只有在参数值为true时才disable (禁用)（与上条用途一致）
12、value 绑定 ———–关联DOM元素的值到view mode的属性上（与上条用途一致）
13、Checked 绑定 ————关联到checkable的form表单控件到view model上
14、Options 绑定 ———–控制什么样的options在下拉列表或者多选列表里，此绑定不能用于select之外的元素，关联的数据应为数组，select会遍历显示数组的所有的项
15、SelectedOptions 绑定 ———用于控制多选列表已经被选择的元素，用在使用options绑定的select元素上
16、UniqueName 绑定——–确保所有绑定的元素都有一个非空的name属性，如果该元素没有name属性，就给他设置一盒unique的字符串作为name属性

模板绑定 template绑定通过模板将数据render到页面

Mapping插件

Knockout.js 整理相关推荐

MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录...
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
JQuery Ajax 与 Knockout.js的结合
项目中遇到太多JQuery Ajax 与 Knockout.js的结合来处理数据的情况,今天将这部分内容梳理一下.一来弄清楚二者结合处理数据的流程,二来是感觉二者结合在一起用的时候有点将二者搞混了,弄 ...
【ASP.NET Web API教程】2.3.5 用Knockout.js创建动态UI
[ASP.NET Web API教程]2.3.5 用Knockout.js创建动态UI 原文:[ASP.NET Web API教程]2.3.5 用Knockout.js创建动态UI 注:本文是[ASP ...
Knockout.Js案例一Introduction
在这第一个教程中,您将体验的一些基本知识构建的web UI Model-View-ViewModel使用knockout.js(MVVM)模式. 案例1:添加:data-bind <p>F ...
MVVM(Knockout.js)的新尝试：多个Page，一个ViewModel
对于面向数据的Web应用来说,MVVM模式是一项不错的选择,它借助JS框架提供的"绑定"机制是我们无需过多关注UI(HTML)的细节,只需要操作绑定的数据源.MVVM最早被微软应用 ...
Knockout.js 初探
Knockout.js是什么? Knockout是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良好的显示和编辑功能的 ...
knockout.js的简介和简单使用
1.knockout简介 knockout是一个轻量级的UI类库,通过MVVM模式使JavaScript前端UI简单化 knockout有四大重要概念: 1)声明式绑定:使用简明移读的语法很容易地将模 ...
Knockout JS 示例
五个小例子,来自Knockout JS官方网站. //tutorial 1 //following codes uses to demonstrate observable values and ta ...
Knockout.js的简单使用
1.Knockout是 MVVM 框架 2.使用Knockout.js给view赋值 var viewmodel = { name: ko.observable('name'), nametow: k ...

Knockout.js 整理

Knockout.js 整理相关推荐

最新文章

热门文章