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来写文章,因为对其语法不是很熟练,写起来有那么点吃力,不过还好,也没有用到很多的语法。

Knockoutjs之observable和applyBindings的使用的更多相关文章

  1. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一)

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

  2. [后端人员耍前端系列]KnockoutJs篇:使用WebApi+Bootstrap+KnockoutJs打造单页面程序

    一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用 ...

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

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

  4. KnockoutJs学习笔记(五)

    作为一名初学者来说,一篇篇的按顺序看官网上的文档的确是一件很痛苦的事情,毕竟它的排列也并非是由浅及深的排列,其中的顺序也颇耐人寻味,于是这篇文章我又跳过了Reference部分,进而进入到具体的bin ...

  5. KNOCKOUTJS DOCUMENTATION-绑定(BINDINGS)-自定义绑定

    除了ko内建的绑定,还可以自定义绑定,灵活地封装复杂的行为使之可重用. 自定义绑定 注册自定义绑定 向 ko.bindingHandles添加一个子属性来注册一个绑定. ko.bindingHandl ...

  6. BootstrapTable与KnockoutJS相结合实现增删改查功能

    http://www.jb51.net/article/83910.htm KnockoutJS是一个JavaScript实现的MVVM框架.通过本文给大家介绍BootstrapTable与Knock ...

  7. knockoutJS学习笔记08:表单域绑定

    前面的绑定都是用在基本标签上,这章主要讲表单域标签的绑定. 一.value 绑定 绑定标签:input text.textarea. <p>用户名:<input type=" ...

  8. KnockoutJS 3.X API 第四章 表单绑定(9) value绑定

    目的 value绑定主要用于DOM元素给视图模型赋值用的.通常用于<input><select><textarea>等元素. value绑定与text绑定的区别在于 ...

  9. knockout简单实用教程3

    在之前的文章里面介绍了一些KO的基本用法.包括基本的绑定方式,基本的ko的绑定语法包括text绑定,html绑定等等(如有不明请参照上两篇文章),下面呢介绍一下关于ko的其他方面的知识.包括比较特殊绑 ...

随机推荐

  1. Leetcode刷题记录:构建最大数二叉树

    题目要求,题目地址 给定一个不含重复数字的数组,最大二叉树构建规则如下: 1.根是数组中最大的数字 2.左边的子树是最大数字左边的内容 3.右边的子树是最大数字右边的内容 答案 class Solut ...

  2. cat、tac、rev、nl命令

    当日志文件log.log很长,但又要按内容从后往前查看时,可以使用如下命令: tac log.log | more cat     由第一行开始显示内容,并将所有内容输出    tac     从最后 ...

  3. 在 JDK 9 中更简洁使用 try-with-resources 语句

    本文详细介绍了自 JDK 7 引入的 try-with-resources 语句的原理和用法,以及介绍了 JDK 9 对 try-with-resources 的改进,使得用户可以更加方便.简洁的使用 ...

  4. Guava CaseFormat

    概述 CaseFormat用来转换各种不同的编程语言间的变量名命名格式, 主要用到的方法只有一个 CaseFormat.to(CaseFormat from, String s) CaseFormat ...

  5. HTTPS那些事(三)攻击实例与防御

    在<HTTPS那些事(二)SSL证书>我描述了使用SSL证书时一些需要注意的安全问题,在这一篇文章里面我再演示一下针对HTTPS攻击的一些实例,通过这些实例能更安全的使用HTTPS.知己知 ...

  6. OpenCV教程(44) harris角的检测(2)

          在上一篇教程中,我们得到的harris特征角二值图中,角的数目特别多,本章我们用一个局部最大化的方法,只保留局部值最大的harris特征角. // Harris角计算 cv::corner ...

  7. 一步一步学android控件(之六) —— MultiAutoCompleteTextView

    今天学习的控件是MultiAutoCompleteTextView . 提到MultiAutoCompleteTextView 我们就自然而然地想到AutoCompleteTextView ,就想知道 ...

  8. Go语言之进阶篇http服务器获取客户端的一些信息

    1.http服务器获取客户端的一些信息 示例: package main import ( "fmt" "net/http" ) //w, 给客户端回复数据 / ...

  9. go语言之进阶篇字符串操作常用函数介绍

    下面这些函数来自于strings包,这里介绍一些我平常经常用到的函数,更详细的请参考官方的文档. 一.字符串操作常用函数介绍 1.Contains func Contains(s, substr st ...

  10. 以快板之名说Android 应用程序电源管理

    当里个当,当里个当.Android开发UE(用户体验)为导向,首要任务便是省电量. 当里个当,当里个当.有一设备立足于墙边,这个设备唤固定电话.你的app造成这样,用户很快把你弃墙角.你咆哮耗电奈何与 ...