Knockoutjs之observable和applyBindings的使用
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')
};
如果我们想修改name和job的值,可能会这样写道:
viewmodel.name('chc');
viewmodel.job('secret');
为了方便和简化写法,就像jQuery的$('#test').find('a').eq(0)这种写法,ko当然也是少不了的,所以上面的写法我们可以这样简化:
viewmodel.name('chc').job('secret');
第一次使用Markdown来写文章,因为对其语法不是很熟练,写起来有那么点吃力,不过还好,也没有用到很多的语法。
Knockoutjs之observable和applyBindings的使用的更多相关文章
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一)
前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...
- [后端人员耍前端系列]KnockoutJs篇:使用WebApi+Bootstrap+KnockoutJs打造单页面程序
一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用 ...
- JS组件系列——KnockoutJS用法
前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...
- KnockoutJs学习笔记(五)
作为一名初学者来说,一篇篇的按顺序看官网上的文档的确是一件很痛苦的事情,毕竟它的排列也并非是由浅及深的排列,其中的顺序也颇耐人寻味,于是这篇文章我又跳过了Reference部分,进而进入到具体的bin ...
- KNOCKOUTJS DOCUMENTATION-绑定(BINDINGS)-自定义绑定
除了ko内建的绑定,还可以自定义绑定,灵活地封装复杂的行为使之可重用. 自定义绑定 注册自定义绑定 向 ko.bindingHandles添加一个子属性来注册一个绑定. ko.bindingHandl ...
- BootstrapTable与KnockoutJS相结合实现增删改查功能
http://www.jb51.net/article/83910.htm KnockoutJS是一个JavaScript实现的MVVM框架.通过本文给大家介绍BootstrapTable与Knock ...
- knockoutJS学习笔记08:表单域绑定
前面的绑定都是用在基本标签上,这章主要讲表单域标签的绑定. 一.value 绑定 绑定标签:input text.textarea. <p>用户名:<input type=" ...
- KnockoutJS 3.X API 第四章 表单绑定(9) value绑定
目的 value绑定主要用于DOM元素给视图模型赋值用的.通常用于<input><select><textarea>等元素. value绑定与text绑定的区别在于 ...
- knockout简单实用教程3
在之前的文章里面介绍了一些KO的基本用法.包括基本的绑定方式,基本的ko的绑定语法包括text绑定,html绑定等等(如有不明请参照上两篇文章),下面呢介绍一下关于ko的其他方面的知识.包括比较特殊绑 ...
随机推荐
- Unicode 和 UTF-8 的区别
作者:于洋链接:https://www.zhihu.com/question/23374078/answer/69732605来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...
- [转]php-mobile-detect
转自:http://www.oschina.net/p/php-mobile-detect php-mobile-detect (Mobile_Detect) 是一个 PHP 类,用来通过 User- ...
- 输入两个很大的正数(用C字符串表示),输出他们的乘积,将设不考虑非法输入。
#include<iostream> #include<cassert> void multiply(const char *a,const char *b) { assert ...
- 【UOJ Easy Round #1】
数论/Trie/并查集 猜数 这题我是这样分析的…… $a*b=g*l=n=k^2 \ and \ (g|a,g|b) \Rightarrow (g*a')*(g*b' )=g*l=k^2 \\ \R ...
- 置顶菜单demo
一朋友需要置顶菜单的功能,给了个网站,让弄下来.看了下,就把样式及效果拔了下来.去掉了复杂的东西,只保留了其基本实现.有需要的朋友可以拿去用用. <style> #navigation{ ...
- [置顶] 不刷机让越狱后的iphone恢复出厂设置
iphone越狱后,设置里的清除所有内容和设置选项是不生效的,选上之后菊花转个不停,只能强制退出,还有白苹果的危险. 若想恢复出厂设置有两个办法: 一.刷机 最直接的办法,我觉得itunes配合ito ...
- 一次问题追查----短字符串签名算法引发的bug
近期开发代码, 出现了一些诡异现象.追查原因是公司使用的签名函数出现的问题. 问题: 代码使用的签名库函数, 对于<=4字节的字符串, 签名就是本身. #include<stdio.h&g ...
- vue里ref ($refs)用法
ref 有三种用法: 1.ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2.ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方 ...
- [ Laravel 5.5 文档 ] 官方扩展包 —— 全文搜索解决方案:Laravel Scout
简介 Laravel Scout 为 Eloquent 模型全文搜索实现提供了简单的.基于驱动的解决方案.通过使用模型观察者,Scout 会自动同步更新模型记录的索引. 目前,Scout 通过 Alg ...
- php命名空间的使用,同一个命名空间可以在多个文件中定义
php namespace的使用,直接打印出已经定义的命名空间 直接上代码,a.php , b.php, c.php , main.php a.php <?php namespace A{ cl ...