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. [Web 前端] Jquery 复制元素,并修改属性, 追加到另一个元素后面

    cp from  : https://blog.csdn.net/cooledi/article/details/52813668 jquery 复制元素,并修改属性 $('#ID').clone() ...

  2. Intelli系列代理部分报错:You have JVM property https.proxyHost set..

    You have JVM property https.proxyHost set to '...'. This may lead to incorrect behaviour. Proxy shou ...

  3. jQuery中attr()和prop()的区别,修改checked属性 jquery attr('checked' 不起作用 attr('checked' 不对

    在做复选框全选按钮的时候,出现了一个问题,使用语句$.attr('checked',true),将复选框的属性改为被选中,在chrome浏览器中第一次点击有效后面就不行了,IE8倒是没有问题. 百度了 ...

  4. [leetcode]Validate Binary Search Tree @ Python

    原题地址:https://oj.leetcode.com/problems/validate-binary-search-tree/ 题意:检测一颗二叉树是否是二叉查找树. 解题思路:看到二叉树我们首 ...

  5. SpringBoot整合Quartz定时任务 的简单实例 2

    (1)什么是Quartz?(2)Quartz的特点:(3)Quartz专用词汇说明:(4)Quartz任务调度基本实现原理: 接下来看下具体的内容: (1)什么是Quartz? Quartz是一个完全 ...

  6. Oracle学习笔记(6)——函数

    函数的作用 方便数据的统计 处理查询结果 函数的分类 Oracle内置的系统函数 数值函数 四舍五入                                             ROUND ...

  7. CRF++地名实体识别(特征为词性和词)

    http://x-algo.cn/index.php/2016/02/29/crf-name-entity-recognition/ 类似使用CRF实现分词和词性标注,地域识别也是需要生成相应的tag ...

  8. 【转载】.NET/C#-uploadify视频文件or大文件上传

    引言 之前使用Uploadify做了一个上传图片并预览的功能,今天在项目中,要使用该插件上传大文件.之前弄过上传图片的demo,就使用该demo进行测试.可以查看我的这篇文章: [Asp.net]Up ...

  9. Java-JUC(二):Java内存模型可见性、原子性、有序性及volatile具有特性

    1.Java HotSpot JVM运行时数据区 Java内存模型即Java Memory Model,简称JMM.JMM定义了Java 虚拟机(JVM)在计算机内存(RAM)中的工作方式.JVM是整 ...

  10. (转)思考:矩阵及变换,以及矩阵在DirectX和OpenGL中的运用问题:左乘/右乘,行优先/列优先,...

    转自:http://www.cnblogs.com/soroman/archive/2008/03/21/1115571.html 思考:矩阵及变换,以及矩阵在DirectX和OpenGL中的运用1. ...