KnockoutJS 3.X API 第四章 数据绑定(1) UI绑定

时间:2021-09-21 21:54:52

本节将介绍六种文本绑定方式:

visible绑定

text绑定

html绑定

css绑定

style绑定

attr绑定

可见文本绑定(visible)

使用visible绑定,来控制DOM元素的可见或隐藏

例子:

<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),则当前元素隐藏,如同CSS样式中display:none。

当参数解析为(例如,布尔值true,或者一个非null对象或序列)中,使其成为可见的。

使用函数和表达式来控制元素的可见性

您还可以使用JavaScript函数或任意JavaScript表达式作为参数值,KO将运行你的函数/表达式,并使用结果来确定是否隐藏元素。

例如:

<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>

文本绑定(text)

使用text绑定到相关的DOM,以显示视图模型属性的值。可用于任何DOM元素上

例如:

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>

  使用函数和表达式来作为文本值

例如:

The item is <span data-bind="text: priceRating"></span> today. <script type="text/javascript"> var viewModel = { price: ko.observable(24.95) }; viewModel.priceRating = ko.pureComputed(function() { return this.price() > 50 ? "expensive" : "affordable"; }, viewModel); </script>

也可以写为如下等同格式:

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

HTML编码

在给视图属性赋值时,默认KO时进行HTML编码的,也就是说,如果赋值的是带有DOM标记或者JS脚本的值,一律会原封不动的显示。不会造成安全隐患或脚本注入等情况。

例如:

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

只会显示<i>Hello,workld!</i>,而不是斜体文本hello world

使用无容器的text绑定

在某些情况下,可能不允许在UI中加入新的dom元素作为KO的text绑定容器,比如下边的这个例子,如果在option元素中再加入新的span元素,将导致无法正常工作:

<select data-bind="foreach: items"> <option>Item <span data-bind="text: name"></span></option> </select>

在这种情况中,可以使用ko自带的无容器绑定写法:<!--ko--> 和 <!--/ko-->,使用这种写法,ko会虚拟出一个容器元素作为绑定使用。

<select data-bind="foreach: items"> <option>Item <!--ko text: name--><!--/ko--></option> </select>

HTML绑定

次绑定方式主要用于显示HTML相关的DOM元素,具体的讲就是将包含HTML元素的视图模型属性渲染到UI上。例如:

<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=http://www.mamicode.com/‘report.html‘>here</a>.</em>"); // HTML content appears </script>

这种方式要注意的是脚本注入攻击,切勿将该方式用于用户输入。

CSS绑定

目的:

CSS绑定主要用于对DOM元素的CSS类添加或删除,这种方式是很有用的,当然Jquery也能做到这一点。

静态例子: