observable在Knockoutjs中属于一个核心功能,在做监控数据的改变时,必须要用到Knockoutjs的监控属性——observable

ko.observable()的简单使用

首先来看一个例子:

var a = ko.observable('hello Knockoutjs!');
console.log(a()); // hello Knockoutjs!
a('This is Knockoutjs!'); console.log(a()); // This is Knockoutjs! 

从上面的例子可以看出ko.observable()会先设置值再返回一个函数赋给变量a,变量a则变成了监控属性了,然后可以通过a()来获取值,通过a('foo')来改变值。

创建带有监控属性的View Model

创建View Model有两种方式:

  • 声明一个对象;
  • 使用new关键词实例化函数。

如:

// 直接声明一个对象的方式
var viewmodel = {name: ko.observable('satrong'),job: ko.observable('web dever') }; 
// 使用new关键词实例化一个函数的方式
var Viewmodel = function(){ this.name = ko.observable('satrong'); this.job = ko.observable('web dever'); }; var viewmodel = new Viewmodel(); 

创建View Model之后,再创建一个简单的HTML视图

<div data-bind="text:name"></div>
<div data-bind="text:job"></div>
<div><input type="value:job" /></div>

在视图中我们需要使用data-bind将刚刚创建的viewmodel和HTML关联到一起,但由于浏览器不能识别data-bind的作用,所以我们必须还需要使用ko.applyBindings(viewmodel);来激活Knockout,这一步是必不可少的。

ko.applyBindings参数的介绍

ko.applyBindings可接受两个参数:

  • 第一个参数属于必备参数,即前面我们创建的View Model;
  • 第二个参数可选,是指Knockout控制HTML的范围。如果为空则默认为document,如果需要指定可以通过document.getElementById('元素的ID')来设置。

在使用ko.applyBindings时可能遇到的问题:

  • 提示“You cannot apply bindings multiple times to the same element.”,意思是在同一个元素上不能进行重复绑定,所以要设置好第二个参数的范围。
  • 在元素上已经添加了某些事件,但使用了ko.applyBindings后添加的事件不起作用。个人理解是这样的,在使用ko.applyBindings后,ko会将所指定范围内的所有元素上的事件清除掉(或者是其他原因清除掉了事件),所以为了保留我们所添加的事件我们可以在ko.applyBindings之后再添加事件。

Knockout中的链式写法

正如我们前面定义的viewmodel:

var viewmodel = {name: ko.observable('satrong'),job: ko.observable('web dever') }; 

如果我们想修改namejob的值,可能会这样写道:

viewmodel.name('chc');
viewmodel.job('secret');

为了方便和简化写法,就像jQuery的$('#test').find('a').eq(0)这种写法,ko当然也是少不了的,所以上面的写法我们可以这样简化:

viewmodel.name('chc').job('secret');

第一次使用Markdown来写文章,因为对其语法不是很熟练,写起来有那么点吃力,不过还好,也没有用到很多的语法。

转载于:https://www.cnblogs.com/amylis_chen/p/7071686.html

Knockoutjs之observable和applyBindings的使用相关推荐

  1. JS组件系列——KnockoutJS用法

    前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...

  2. 了解KnockOut.js

    Knockout是微软出品,是MVVM模型领域内的先驱,使用函数偷龙转凤,最短编辑长度算法实现DOM的同步,兼容IE6. Knockout是一个JS的MVVM模式的实现,Knockout是建立在3个核 ...

  3. Knockout应用开发指南

    第一章:入门 1.Knockout简介 (Introduction) Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化. Knockout有如下4大重要 ...

  4. Knockout应用开发指南 第八章:简单应用举例(1)

    Knockout应用开发指南 第八章:简单应用举例(1) 原文:Knockout应用开发指南 第八章:简单应用举例(1) 本章展示的4个例子主要是利用了Knockout的基本语法特性,让大家感受到使用 ...

  5. KnockOut绑定

    1 visible 绑定 目的 visible绑定到DOM元素上,使得该元素的hidden或visible状态取决于绑定的值. 例子 <div data-bind="visible: ...

  6. 第五章:创建自定义绑定

    你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等).你可以你封装复杂的逻辑或行为,自定义很容易使用和重用的绑定.例如,你可以在form表单里自定义像grid,ta ...

  7. html select不能修改,更改HTML Select元素的选定选项

    香草JavaScript 使用普通的旧JavaScript: var val = "Fish"; var sel = document.getElementById('sel'); ...

  8. 3.Knockout.Js(属性绑定)

    前言 让visible绑定到DOM元素上,使得该元素的hidden或visible取决于绑定的值. 简单的绑定 首先还是先定义一个ViewModel var AppViewModel = {shoul ...

  9. Knockout绑定语法

    1 visible 绑定 目的 visible绑定到DOM元素上,使得该元素的hidden或visible状态取决于绑定的值. 例子 <div data-bind="visible: ...

最新文章

  1. Matlab 2022a 安装教程(手把手式教程 超简单)
  2. mac mysql 移动硬盘_MAC一些高能过程记录(一些没必要的坑)
  3. 2020年快手美妆行业数据价值报告
  4. kettle优化抽取数据速度_Kettle性能优化
  5. SCUT - 240 - 宝华的文件系统 - 模拟
  6. Python高阶函数-闭包
  7. 全球及中国无线硬盘行业发展前景与投资战略规划分析报告2022-2028年
  8. 机器人拉格朗日动力学应用公式详解
  9. html如何给标题设置边框和底纹,word如何设置文字边框和底纹
  10. 什么是美国能源之星计划?
  11. 五、python的数据容器(站在前辈们的肩膀上注入自己的理解,强势总结,适合入门,也适合复习)
  12. bootstrap 5 表单验证
  13. 设计模式(5)原型模式(Prototype)
  14. springboot 单元测试使用 @value读取不到值, yml的两个坑
  15. 商务工作人员用什么邮箱,超好用的商务邮箱申请攻略!
  16. 好消息!华为EUV光刻新专利公开
  17. ssh免密超级简单复制操作
  18. 玉雕工作室php,吴春强玉雕大师—吴春强玉雕工作室
  19. 去哪儿网一面:工厂方法模式
  20. Oracle-图形化界面-数据库安装

热门文章

  1. 哈佛创业者讲述:比特币与区块链背后的真相 | 硬创公开课
  2. poj 1860 Currency Exchange (SPFA、正权回路 bellman-ford)
  3. MODIS数据的简介和下载(三)——MODIS数据下载方式(基于MODIS Web Service)
  4. MySQL锁系列3 MDL锁
  5. Java 异常丢失及finally子句
  6. android各个版本市场占有率(2013年3月)
  7. 怎么将.POF文件下载到开发板[转载]
  8. 22.Silverlight使用WebService调用C++,Delphi编写的DLL文件
  9. 网上一片红色的中国心,我也来跟随潮流,表达对祖国的热爱!
  10. shell脚本----for循环-转 Syntax error: Bad for loop variable