文档章节

Knockout应用开发指南 第三章:绑定语法(1)

彭登灏
 彭登灏
发布于 2014/11/04 12:26
字数 2690
阅读 3
收藏 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核心类库外,无依赖。

本文转载自:http://www.cnblogs.com/TomXu/archive/2011/11/23/2256854.html

彭登灏
粉丝 0
博文 18
码字总数 27287
作品 0
广州
程序员
私信 提问
《Knockout应用开发指南》系列技术文章整理收藏

《Knockout应用开发指南》系列技术文章整理收藏 Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化,Knockout应用开发指南系列整理了Knockout方面的技术文章,供学习...

开元中国2015
2015/06/22
26
0
knockout2.0系列教程汇总

本文档对knockout2.x的基本使用方法做了讲解,虽然不是十分全面,但也几乎涵盖了knockout2.x的知识(除了高级用法、自定义绑定) 高级应用 分享到:

zuolz1985
2013/05/11
0
0
个人整理的Knockout.js文档,有兴趣的朋友可以直接下载!

上周四在看Knockout.js的官方文档,阅读过程中顺便将其整理成了一份完整的文档,如果你此有兴趣,可以从这里下载。 P.S. Knockout.js简介[来自百度百科] Knockout是一个轻量级的UI类库,通过...

长平狐
2012/09/04
301
0
集成 Knockout 和 Twitter Bootstrap Popover

简介 Knockout 是一个功能强大,非常有用的 javascript 库,用于实现在模板中双向绑定的 MVVM(Model-View-ViewModel) 模式,并有内置的绑定支持来绑定数据到 HTML 元件上去。 Knockout 也支持...

oschina
2014/03/10
613
0
Knockout.js 3.5.0 Beta 发布,JavaScript 的 UI 库

Knockout.js 3.5.0 beta 发布了。Knockout 是个 JavaScript library,帮助创建丰富的显示和编辑器 UI,通过干净的底层数据模型。你可以在任何时候动态更新 U I的所选择部分。 更新内容:此版...

周其
2017/12/30
668
7

没有更多内容

加载失败,请刷新页面

加载更多

windows下cmd常用的命令

windows下常用的命令指示行: windows下 CMD比较常见的命令1. gpedit.msc-----组策略 2. sndrec32-------录音机 3. Nslookup-------IP地址侦测器 4. explorer-------打开资源管理器...

WinkJie
33分钟前
1
0
折叠手机适配布局

CSS Grid 设备相关参数 媒体查询 Chrome进行调试,创建相应的模拟机

lilugirl
34分钟前
1
0
Knative Eventing 中如何实现 Registry 事件注册机制

摘要: 在最新的 Knative Eventing 0.6 版本中新增了 Registry 特性, 为什么要增加这个特性, 该特性是如何实现的。针对这些问题,希望通过本篇文章给出答案。 背景 作为事件消费者,之前是...

阿里云云栖社区
37分钟前
0
0
安装 jemalloc for mysql

前言: Jemalloc 是BSD的提供的内存分配管理 安装依赖 $ yum install -y gcc$ yum install autoconf -y 安装 jemalloc $ git clone https://github.com/jemalloc/jemalloc$ cd jema......

Linux_Anna
48分钟前
2
0
linux下ctrl+c中止不了

有一台centos7的服务器,ctrl+c无效,并且tail -f也无效,只能关掉终端或者crtl+z放入后台再删掉,但是ping的时候使用ctrl+c是有效果的。 出现这种情况的原因可能是因为有人要使用ruby安装r...

gaolongquan
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部