knockoutJS学习笔记04:监控属性

一、语法介绍

  先来看一个简单的例子:

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

  var obj = {name:ko.observable("tom")}

  ko.applyBindings(obj);

  这样会自动完成绑定。其中有3个特别的地方:1. data-bind。2.ko.observable 方法。 3.ko.applyBindings 方法。

1.1 data-bind

  data-bind 并不是html元素的固有属性,但它是完全正确的(符合html5规范),虽然在非html5验证器中会提示这是一个无效的属性,但这不会有任何问题。ko就是用data-bind来声明绑定的。

  data-bind 依赖于标签,也就是data-bind必须作为标签属性写在标签内。所以我们要输出一个变量,也必须绑定在标签内才能输出。

  例如:data-bind="text:name",text 是我们要绑定的“属性”,例如要为 span、div 赋值,就用 text;这个与jquery 的写法是一样的,例如我们会用 $("#id").text(str); 如果是一个编辑框呢?就是 value:name 了。

  这里有一个小小的建议,很多时候我们会在标签里自定义属性,例如userid,建议都用 data- 开头,例如:data-userid。

1.2 observable

  有了视图,还要数据。如过上面属性直接写为: name:"tom",也是可以完成绑定的。不过这样就只是单向、一次性绑定了。如果要进行双向绑定,就要用 observable方法了,用了该方法后,该属性就不是简单的js对象属性了,而是ko特有的对象,取值和赋值也都跟普通属性不一样了。

1.3 applyBindings

  有了视图和数据,只需要触发绑定操作就ok了。ko的applyBindings 方法就是触发绑定的,它有2个参数,第一个参数是数据对象,第二个参数是可选的,用来设置使用 data-bind 的html元素或容器。例如,有时候界面上有很多处绑定,为了让结构更加清晰和避免冲突,可以用:ko.applyBindings(obj,document.getElementById("list")); 这样就表示obj对象绑定在id为list内,声明有 data-bind 的html元素。

了解了ko的绑定方式后,我们来总结一下数据绑定的几种方式:

一般的数据绑定有三种:One-Time,One-Way,Two-way。

One-Time绑定模式:从viewModel绑定至UI这一层只进行一次绑定,程序不会继续追踪数据的在两者中任何一方的变化,这种绑定方式适用于数据仅仅会加载一次的情况。

One-Way绑定模式:单向绑定,即object-UI的绑定,只有当viewModel中数据发生了变化,UI中的数据也将会随之发生变化,反之不然。

Two-Way绑定模式:双向绑定,无论数据在Object或者是UI中发生变化,应用程序将会更新另一方,这是最为灵活的绑定方式,同时代价也是最大的。

数据绑定只是作为元素的自定义属性写上标签内,并不能决定它是何种绑定。

如果值是通过ko.observable定义的说明是双向绑定,否则为One-Time绑定,在knockout不存在单向绑定。

二、监控属性的取值/赋值

2.1 取值

  上面说到observable属性不再是普通属性,它的取值也不再是obj.name这样的格式了,而是通过 obj.name() 这样获得,实际上我们可以将 name 打印出来,它已经变成一个函数了。

2.2 赋值

  同理,赋值不能用 obj.name = "xxx",而是用 obj.name("xxx"); 这种取值和赋值的方法设计和jquery的设计是一样的。而且,这里也可以链式调用,例如:obj.name("xxx").age("20");

2.3 例子

  接下来就通过一个例子来体会双向绑定。当编辑框失去焦点时,右边的自动更新,点击清空恢复原状。这个过程没有用到dom操作。

  

  html:  

    <p>姓名:<input type="text" data-bind="value:name" /> 您输入的姓名:<span data-bind="text:name"></span></p>
    <p>年龄:<input type="text" data-bind="value:age" /> 您输入的姓名:<span data-bind="text:age"></span></p>
    <p><input type="button" value="清空" onclick="reset()" /></p>

  js:  

    var obj = {
        name : ko.observable(""),
        age : ko.observable(0)
    }
    ko.applyBindings(obj);
    function reset(){
        obj.name("");
        obj.age(0);
    }

三、compute

  计算属性。熟悉数据库的朋友应该了解有个字段叫做【计算字段】,顾名思义,这个字段的值是由其它字段计算而来的。ko里的计算属性也是一样的,由其它属性计算而来,具体计算方式由我们控制。例如上面的例子,我们想在输入姓名和年龄后自动完成:“姓名,年龄” 这样的格式就可以用计算属性。如:

<p>总信息:<span data-bind="text:format"></span></p>

  这里把数据改为 function 的写法,因为在js里函数也是对象,这也是一种推荐的写法。  

    function Person(){
        this.name = ko.observable("");
        this.age = ko.observable(0);
        this.format = ko.computed(function(){
            return this.name() + "," + this.age();
        },this);
    }
    var person = new Person();
    ko.applyBindings(person);
    function reset(){
        person.name("");
        person.age(0);
    }

  这里要注意的是 this 是作为 computed 的参数传入。因为我们要获得Person对象的name和age属性,而传入的this,经调用构造函数后,就指向了Person对象。如果没有这样传入呢?那么this指向的是window对象。关于this 的用法也可以看这篇文章:我这样理解js里的this。

  另外,计算属性还支持下面的写法,支持更复杂的操作,不过一般很少用到。如下:

        this.format = ko.computed({
            read:function(){return this.name() + "," + this.age;},
            write:function(value){console.log(value);},
            owner:this
        });

四、总结

  observable 是ko 的核心之一,是它在对象的属性和dom之间建立了绑定。

时间: 2024-11-03 03:43:33

knockoutJS学习笔记04:监控属性的相关文章

Android自定义View学习笔记04

Android自定义View学习笔记04 好长时间没有写相关的博客了,前几周在帮学姐做毕设,所以博客方面有些耽误.过程中写了一个类似wp的磁贴的view,想再写个配套的layout,所以昨天看了一下自定义viewGroup的相关知识-晚上睡觉想了一下可行性不是很高-代码量还不如直接自己在xml上写来得快,速度上也是个问题.今天看了一下张鸿洋老师的Android 自定义View (三) 圆环交替 等待效果这篇博文,再加上前一段时间看到的一幅图,结合之前写的一个圆形imageView的实现博文And

HTML学习笔记04

HTML学习笔记04 一.HTML样式 1.外部样式表:例如<link rel="stylesheet" type="text/css" href="mystle.css"> 2.内部样式表:在head部分通过<style>定义内部样式表,如<style type="text/css"> p{margin-left:20px}</style> 3.内联样式:在相关的标签中使用样式

Swift学习笔记十:属性

1.存储属性       1. 作为特定类或结构实例的一部分,存储属性存储着常量或者变量的值.存储属性可分为变量存储属性(关键字var描述)和常量存储属性(关键字let描述). struct student{ let name = "" var score = 0 } let a = student(name:"小笨狼",score:96)           注意:                ① 定义储存属性时,需要为每一个属性定义一个默认值.在初始化的时候,

【OpenGL 学习笔记04】顶点数组

通过之前的学习,我们知道,如果要绘制一个几何图形,那就要不断的调用绘制函数,比如绘制一个20条边的多边形,起码要调用22条函数(包含glBegin和glEnd). 所以OpenGL提供了一系列的顶点数组函数减少函数调用的次数来提高性能.而且使用顶点还可以避免顶点共享的冗余处理. 1.简单示例 先来回顾一下之前我们是怎么画直线的: void drawOneLine(GLfloat x1,GLfloat y1,GLfloat x2,GLfloat y2) { glBegin(GL_LINES); g

SWIFT学习笔记04

1.在实际编译时,Swift 编译器会优化字符串的使用,使实际的复制只发生在绝对必要的情况下,这意味着您将字符串作为值类型的同时可以获得极高的性能. 2.for character in "Dog!" { println(character) } // D // o // g // ! 3.通过标明一个Character类型注解并通过字符字面量进行赋值,可以建立一个独立的字符常量或变量: let yenSign: Character = "¥" 4.计算字符数量 l

knockoutJS学习笔记06:ko数组与模板绑定

前面已经介绍了基本的绑定和模板相关知识,接下来就看ko里的数组和模板绑定,数组和模板绑定应该是实际项目中用得比较多的,ko提供了很好的支持. 一.observaleArray 前面的监控属性都是单个对象,用的是ko.observable:有时候后台返回的是一个列表,也就是数组,这个时候就需要用监控数组了.监控数组与监控属性几乎一样,只不过它是一个数组对象,拥有数组的特点.例如:创建一个简单的监控数组: var arr = ko.observableArray(); 也可以开始就进行初始化: ar

初学knockoutjs记录2——Observables监控属性(2 Observable Arrays 监控数组)

1 Observable Arrays 监控数组 如果你想要监测和响应某个对象的变化,你应该使用Observable监控属性:如果你想要监测和响应一个对象集合的变化,那么请使用ObservableArray监控数组,这在很多场景下都很有用,例如当你要呈现或编辑多个值时,当你需要像列表项添加或移除一样处理UI上多个重复片段时. 例如 var myObservableArry = ko.observableArray(); // Initally an empty array myObservabl

knockoutJS学习笔记09:使用mapping插件

一.问题引出 通常,我们先定义好html结构或者模板,通过ajax向后台发起请求,后台返回json数据,然后再将json数据渲染到页面上.以博客园个人博客里的个人信息为例子,如图: 1.定义html. <p>姓名:<span data-bind="text:UserName"></span></p> <p>园龄:<span data-bind="text:BlogAge"></span&g

[原创]java WEB学习笔记04:Servlet 简介及第一个Servlet程序

本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱好者,互联网技术发烧友 微博:伊直都在0221 QQ:951226918 ---------------------------------