第三章:绑定语法(1)

第三章所有代码都需要启用KO的 ko.applyBindings(viewModel); 功能,才能使代码生效,为了节约篇幅,所有例子均省略了此行代码。

1 visible 绑定

目的

visible绑定到DOM元素上,使得该元素的hidden或visible状态取决于绑定的值。

例子

<div data-bind="visible: shouldShowMessage">
    You will see this message only when "shouldShowMessage" holds a true value.
</div>

<script type="text/javascript">
    var viewModel = {
        shouldShowMessage: ko.observable(true) // Message initially visible
    };
    viewModel.shouldShowMessage(false); // ... now it‘s hidden
    viewModel.shouldShowMessage(true); // ... now it‘s visible again
</script>

参数

主参数

当参数设置为一个假值时(例如:布尔值false, 数字值0, 或者null, 或者undefined) ,该绑定将设置该元素的style.display值为none,让元素隐藏。它的优先级高于你在CSS里定义的任何display样式。

当参数设置为一个真值时(例如:布尔值true,或者非空non-null的对象或者数组) ,该绑定会删除该元素的style.display值,让元素可见。然后你在CSS里自定义的display样式将会自动生效。

如果参数是监控属性observable的,那元素的visible状态将根据参数值的变化而变化,如果不是,那元素的visible状态将只设置一次并且以后不在更新。

其它参数

注:使用函数或者表达式来控制元素的可见性

你也可以使用JavaScript函数或者表达式作为参数。这样的话,函数或者表达式的结果将决定是否显示/隐藏这个元素。例如:

<div data-bind="visible: myValues().length > 0">
    You will see this message only when ‘myValues‘ has at least one member.
</div>

<script type="text/javascript">
    var viewModel = {
        myValues: ko.observableArray([]) // Initially empty, so message hidden
    };
    viewModel.myValues.push("some value"); // Now visible
</script>

依赖性

除KO核心类库外,无依赖。

2 text 绑定

目的

text 绑定到DOM元素上,使得该元素显示的文本值为你绑定的参数。该绑定在显示<span>或者<em>上非常有用,但是你可以用在任何元素上。

例子

Today‘s message is: <span data-bind="text: myMessage"></span> 

<script type="text/javascript">
    var viewModel = {
        myMessage: ko.observable() // Initially blank
    };
    viewModel.myMessage("Hello, world!"); // Text appears
</script>

参数

主参数

KO将参数值会设置在元素的innerText (IE)或textContent(Firefox和其它相似浏览器)属性上。原来的文本将会被覆盖。

如果参数是监控属性observable的,那元素的text文本将根据参数值的变化而更新,如果不是,那元素的text文本将只设置一次并且以后不在更新。

如果你传的是不是数字或者字符串(例如一个对象或者数组),那显示的文本将是yourParameter.toString()的等价内容。

其它参数

注1:使用函数或者表达式来决定text值

如果你想让你的text更可控,那选择是创建一个依赖监控属性(dependent observable),然后在它的执行函数里编码,决定应该显示什么样的text文本。

例如:

The item is <span data-bind="text: priceRating"></span> today.

<script type="text/javascript">
    var viewModel = {
        price: ko.observable(24.95)
    };

    viewModel.priceRating = ko.dependentObservable(function () {
        returnthis.price() >50?"expensive" : "affordable";
    }, viewModel);
</script>

现在,text文本将在“expensive”和“affordable”之间替换,取决于价格怎么改变。

然而,如果有类似需求的话其实没有必要再声明一个依赖监控属性(dependent observable), 你只需要按照如下代码写JavaScript表达式就可以了:

The item is <span data-bind="text: price() > 50 ? ‘expensive‘ : ‘affordable‘"></span> today.

结果是一样的,但我们不需要再声明依赖监控属性(dependent observable)。

注2:关于HTML encoding

因为该绑定是设置元素的innerText或textContent (而不是innerHTML),所以它是安全的,没有HTML或者脚本注入的风险。例如:如果你编写如下代码:

viewModel.myMessage("<i>Hello, world!</i>");

它不会显示斜体字,而是原样输出标签。如果你需要显示HTML内容,请参考html绑定.

注3:关于IE 6的白空格whitespace

IE6有个奇怪的问题,如果 span里有空格的话,它将自动变成一个空的span。如果你想编写如下的代码的话,那Knockout将不起任何作用:

Welcome, <span data-bind="text: userName"></span> to our web site.

IE6 将不会显示span中间的那个空格,你可以通过下面这样的代码避免这个问题:

Welcome, <span data-bind="text: userName">&nbsp;</span> to our web site.

IE6以后版本和其它浏览器都没有这个问题

依赖性

除KO核心类库外,无依赖。

3 html 绑定

目的

html绑定到DOM元素上,使得该元素显示的HTML值为你绑定的参数。如果在你的view model里声明HTML标记并且render的话,那非常有用。

例子

<div data-bind="html: details"></div> 

<script type="text/javascript">
    var viewModel = {
        details: ko.observable() // Initially blank
    };

    viewModel.details("<em>For further details, view the report <a href=‘report.html‘>here</a>.</em>");
    // HTML content appears
</script>  

参数

主参数

KO设置该参数值到元素的innerHTML属性上,元素之前的内容将被覆盖。

如果参数是监控属性observable的,那元素的内容将根据参数值的变化而更新,如果不是,那元素的内容将只设置一次并且以后不在更新。

如果你传的是不是数字或者字符串(例如一个对象或者数组),那显示的文本将是yourParameter.toString()的等价内容。

其它参数

注:关于HTML encoding

因 为该绑定设置元素的innerHTML,你应该注意不要使用不安全的HTML代码,因为有可能引起脚本注入攻击。如果你不确信是否安全(比如显示用户输入 的内容),那你应该使用text绑定,因为这个绑定只是设置元素的text 值innerText和textContent。

依赖性

除KO核心类库外,无依赖。

4 css 绑定

目的

css绑定是添加或删除一个或多个CSS class到DOM元素上。 非常有用,比如当数字变成负数时高亮显示。(注:如果你不想应用CSS class而是想引用style属性的话,请参考style绑定。)

例子

<div data-bind="css: { profitWarning: currentProfit() < 0 }">
   Profit Information
</div>

<script type="text/javascript">
    var viewModel = {
        currentProfit: ko.observable(150000)
        // Positive value, so initially we don‘t apply the "profitWarning" class
    };

    viewModel.currentProfit(-50);
    // Causes the "profitWarning" class to be applied
</script>

效果就是当currentProfit 小于0的时候,添加profitWarning CSS class到元素上,如果大于0则删除这个CSS class。

参数

主参数

该参数是一个JavaScript对象,属性是你的CSS class名称,值是比较用的true或false,用来决定是否应该使用这个CSS class。

你可以一次设置多个CSS class。例如,如果你的view model有一个叫isServre的属性,

<div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">

非布尔值会被解析成布尔值。例如, 0和null被解析成false,21和非null对象被解析成true。

如果参数是监控属性observable的,那随着值的变化将会自动添加或者删除该元素上的CSS class。如果不是,那CSS class将会只添加或者删除一次并且以后不在更新。

你可以使用任何JavaScript表达式或函数作为参数。KO将用它的执行结果来决定是否应用或删除CSS class。

其它参数

注:应用的CSS class的名字不是合法的JavaScript变量命名

如果你想使用my-class class,你不能写成这样:

<div data-bind="css: { my-class: someValue }">...</div>

因为my-class不是一个合法的命名。解决方案是:在my-class两边加引号作为一个字符串使用。这是一个合法的JavaScript 对象 文字(从JSON技术规格说明来说,你任何时候都应该这样使用,虽然不是必须的)。例如,

<div data-bind="css: { ‘my-class‘: someValue }">...</div>

依赖性

除KO核心类库外,无依赖。

5 style 绑定

目的

style绑定是添加或删除一个或多个DOM元素上的style值。比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar。(注:如果你不是应用style值而是应用CSS class的话,请参考CSS绑定。)

例子

<div data-bind="style: { color: currentProfit() < 0 ? ‘red‘ : ‘black‘ }">
   Profit Information
</div>
<script type="text/javascript">
    var viewModel = {
        currentProfit: ko.observable(150000) // Positive value, so initially black
    };
    viewModel.currentProfit(-50); // Causes the DIV‘s contents to go red
</script>

当currentProfit 小于0的时候div的style.color是红色,大于的话是黑色。

参数

主参数

该参数是一个JavaScript对象,属性是你的style的名称,值是该style需要应用的值。

你可以一次设置多个style值。例如,如果你的view model有一个叫isServre的属性,

<div data-bind="style: { color: currentProfit() < 0 ? ‘red‘ : ‘black‘, fontWeight: isSevere() ? ‘bold‘ : ‘‘ }">
    ...
</div>

如果参数是监控属性observable的,那随着值的变化将会自动添加或者删除该元素上的style值。如果不是,那style值将会只应用一次并且以后不在更新。

你可以使用任何JavaScript表达式或函数作为参数。KO将用它的执行结果来决定是否应用或删除style值。

其它参数

注:应用的style的名字不是合法的JavaScript变量命名

如果你需要应用font-weight或者text-decoration,你不能直接使用,而是要使用style对应的JavaScript名称。

错误: { font-weight: someValue } ; 正确: { fontWeight: someValue }

错误: { text-decoration: someValue } ; 正确: { textDecoration: someValue }

参考:style名称和对应的JavaScript 名称列表

依赖性

除KO核心类库外,无依赖。

6 attr 绑定

目的

attr 绑定提供了一种方式可以设置DOM元素的任何属性值。你可以设置img的src属性,连接的href属性。使用绑定,当模型属性改变的时候,它会自动更新。

例子

<a data-bind="attr: { href: url, title: details }">
    Report
</a>

<script type="text/javascript">
    var viewModel = {
        url: ko.observable("year-end.html"),
        details: ko.observable("Report including final year-end statistics")
    };
</script>

呈现结果是该连接的href属性被设置为year-end.html, title属性被设置为Report including final year-end statistics。

参数

主参数

该参数是一个JavaScript对象,属性是你的attribute名称,值是该attribute需要应用的值。

如果参数是监控属性observable的,那随着值的变化将会自动添加或者删除该元素上的attribute值。如果不是,那attribute值将会只应用一次并且以后不在更新。

其它参数

注:应用的属性名字不是合法的JavaScript变量命名

如果你要用的属性名称是data-something的话,你不能这样写:

<div data-bind="attr: { data-something: someValue }">...</div>

因为data-something 不是一个合法的命名。解决方案是:在data-something两边加引号作为一个字符串使用。这是一个合法的JavaScript 对象 文字(从JSON技术规格说明来说,你任何时候都应该这样使用,虽然不是必须的)。例如,

<div data-bind="attr: { ‘data-something’: someValue }">...</div>

依赖性

除KO核心类库外,无依赖。

时间: 2024-11-07 10:03:40

第三章:绑定语法(1)的相关文章

语法》第三章 数值

(本文为阮一峰js标准教程的学习笔记,旨在总结该教程中涉及的知识点大纲及个人所做的一些拓展,方便作为"目录"或者"大纲"复习和查漏补缺,详细内容请参见阮一峰教程原文) 第二部分 语法 **********第三章 数值*************** 一.概述1.所有数都是以64位浮点数形式储存的.1与1.0相同(8bit.也就是64位二进制数)2.JavaScript 语言的底层根本没有整数,所有数字都是小数(64位浮点数).3.由于浮点数不是精确的值,所以涉及小数的

Java Persistence with MyBatis 3(中文版) 第三章 使用XML配置SQL映射器

关系型数据库和SQL是经受时间考验和验证的数据存储机制.和其他的ORM 框架如Hibernate不同,MyBatis鼓励开发者可以直接使用数据库,而不是将其对开发者隐藏,因为这样可以充分发挥数据库服务器所提供的SQL语句的巨大威力.与此同时,MyBaits消除了书写大量冗余代码的痛苦,它使使用SQL更容易. 在代码里直接嵌套SQL语句是很差的编码实践,并且维护起来困难.MyBaits使用了映射器配置文件或注解来配置SQL语句.在本章中,我们会看到具体怎样使用映射器配置文件来配置映射SQL语句.

Android 渗透测试学习手册 第三章 Android 应用的逆向和审计

第三章 Android 应用的逆向和审计 作者:Aditya Gupta 译者:飞龙 协议:CC BY-NC-SA 4.0 在本章中,我们将查看 Android 应用程序或.apk文件,并了解其不同的组件. 我们还将使用工具(如 Apktool,dex2jar 和 jd-gui)来逆向应用程序. 我们将进一步学习如何通过逆向和分析源代码来寻找 Android 应用程序中的各种漏洞. 我们还将使用一些静态分析工具和脚本来查找漏洞并利用它们. 3.1 Android 应用程序拆解 Android 应

深入浅出Zabbix 3.0 -- 第三章 Zabbix 监控方式

第三章  Zabbix 监控方式 有人说通过Zabbix可以完成任何监控任务,只有你想不到的,但没有监控不了的,真是这样吗?当你通过本章了解了Zabbix提供的多种监控方式后,你就会发现此言非虚. 这里所说的监控方式,实际上就是Zabbix中的配置监控项时选择的监控项类型.为了适应各种应用场景的需要,Zabbix提供了多种方法帮助你更好的完成监控任务. Zabbix 3.0中提供的监控方式包括: Active agents Passive agents Extending agents Simp

Jquery的一、二、三章的笔记

第一章:Jquery的基础 JQuery - 是一个JavaScript的框架(函数库) 一.Jquery的使用 1.下载Jquery框架:http://jquery.com 2.在页面引用jquery-x.x.x.js文件 <script type="text/javascript" src="js/jquery-1.7.2.js"></script> 3.使用 二.第一个Jquery程序$() $(document).ready(func

标准库》第三章 包装对象和Boolean对象

第三部分  标准库 ***************第三章   包装对象和Boolean对象******************* 一.包装对象的定义[1]有人说,JavaScript语言"一切皆对象",数组和函数本质上都是对象,就连三种原始类型的值--数值.字符串.布尔值--在一定条件下,也会自动转为对象,也就是原始类型的"包装对象". 所谓"包装对象",就是分别与数值.字符串.布尔值相对应的Number.String.Boolean三个原生对象

JavaScript高级程序设计(第3版)第三章读书笔记

第三章  基本概念 ECMAScript中的一切(变量.函数名和操作符)都区分大小写. 标识符是指变量.函数.属性的名字,或者函数的参数. 标识符的组成规则是:第一个字符必须是一个字母.下划线(_)或一个美元符号($):其他字符可以是字母.下划线.美元符号或数字. ECMAScript标识符采用驼峰大小写格式. ECMAScript注释包括单行注释(//)和块级注释(/*  *  */). ECMAScript 5引入了严格模式的概念,严格模式是为JavaScript定义了一种不同的解析与执行模

Java基础知识二次学习-- 第二章 基础语法与递归补充

第二章 基础语法与递归补充   时间:2017年4月24日10:39:18 章节:02章_01节,02章_02节 视频长度:49:21 + 15:45 内容:标识符,关键字与数据类型 心得:由字母,下划线,$,数字组成,应该由字母,下划线$开头,同时应该避开java保留字符 变量是内存中的一小块区域,使用变量名来访问这块区域 执行过程中的内存管理(疑问:这里的内存和Jvm的一样吗?) code segment 存放代码 data segment 静态变量 字符串常量 stack 栈 局部变量 h

Javascript高级程序设计——第三章:基本概念

javascript高级程序设计——第三章:基本概念 一.语法 EMCA-262通过叫做ECMAScript的“伪语言”为我们描述了javascript实现的基本概念 javascript借鉴了C的语法,区分大小写,标示符以字母.下划线.或美元符号($)开头,注释可以用 // 或者/* */ 严格模式: ECMAScript 5引入了严格模式,在严格模式下不确定的行为将得到处理,通过在顶部添加 “use strict”来启用严格模式: function fuc(){ "use strict&qu