Knockout学习之文本和外观绑定器

文本和外观绑定器

“visible”绑定

该绑定主要用来让我们通过监控属性可以控制html文档的显示,只要绑定的监控属性为false、0、null或者undefined则隐藏该标签,否则显示。比如下面的示例:

 1 <span data-bind="visible:visibleState">显示了</span>
 2 <div>
 3     <button type="button" data-bind="click:show">出现吧,我的皮卡丘</button>
 4     <button type="button" data-bind="click:hide">滚粗吧,你!</button>
 5 </div>
 6
 7
 8     <script type="text/javascript">
 9
10         var appViewModel = function () {
11             this.visibleState = ko.observable(false);
12             this.show = function () {
13                 this.visibleState(true);
14             };
15             this.hide = function () {
16                 this.visibleState(false);
17             }
18         }
19
20         ko.applyBindings(new appViewModel());
21 </script>

默认是不显示的,当点击出现按钮设置visibleState的值为true,因为ko会自动更新。所以对应的标签也就显示了,相反我们点击另一个按钮,则标签消失。这仅仅只是通过监控属性来控制,我们也可以使用表达式,我们将上面的代码改写:

1 <span data-bind="visible:visibleState() == true">显示了</span>

我们直接在data-bind中写了判断语句,当然这是可以的。最后效果还是跟之前的一样。

“text”绑定

前面我们一直在使用这个绑定,所以这里笔者就不把那些重复的东西继续介绍了,直接介绍我们没有使用过的语法,在前面的使用过程中我们一直都是直接将监控属性显示到对应标签中,其实我们可以在标签文本的指定位置显示,比如下面的代码:

 1 <ul data-bind="foreach:datalist" >
 2     <li>value<!--ko text:value--><!--/ko--></li>
 3 </ul>
 4
 5
 6     <script type="text/javascript">
 7
 8         var appViewModel = function () {
 9             this.datalist = ko.observableArray([{ "value": 1 }, { "value": 2 }, { "value": 3 }]);
10         }
11
12         ko.applyBindings(new appViewModel());
13     </script>

我们将可以看到如下的结果:

“html”绑定

其实这个绑定跟text差不多,都是设置标签的内容,但是如果我们的监控属性中存在标签,则就存在意义了,因为text会将我们的标签转义输出,而html则不会,比如下面的示例:

 1 <div data-bind="html: htmlText" >
 2
 3 </div>
 4
 5
 6     <script type="text/javascript">
 7
 8         var appViewModel = function () {
 9             this.htmlText = ko.observable("<h1>哈哈,我们又见面了</h1>");
10         }
11
12         ko.applyBindings(new appViewModel());
13 </script>

最终的效果图如下所示:

“css”绑定

其实这个属性一开始我会认为可以设置style,其实不相干,它只是用来控制class使用哪些样式的,第一种方式是直接通过监控属性赋样式,比如下面这种方式:

 1 <style type="text/css">
 2     .test1 {
 3         background-color: red;
 4     }
 5
 6     .test2 {
 7         background-color: green;
 8     }
 9 </style>
10
11 <div data-bind="css: cssName">
12     我会变色
13 </div>
14 <div>
15     <button type="button" data-bind="click: changeTest1">我变</button>
16     <button type="button" data-bind="click: changeTest2">我再变</button>
17 </div>
18
19
20     <script type="text/javascript">
21
22         var appViewModel = function () {
23             this.cssName = ko.observable("");
24             this.changeTest1 = function () {
25                 this.cssName("test1");
26             };
27             this.changeTest2 = function () {
28                 this.cssName("test2");
29             };
30         }
31
32         ko.applyBindings(new appViewModel());
33 </script>

一开始默认是没有颜色的,当我们点击不同的按钮后可以看到这个div会切换不同的背景色,这些都是通过ko来实现的,当然我们也可以不用这种方式,而是通过表达式去控制,比如下面这种方式:

1 <div data-bind="css:{ test1:cssName() == ‘test1‘,test2:cssName() == ‘test2‘}">
2     我会变色
3 </div>

虽然换成了表达式的形式,但是最终的效果跟上面的是完全一样的,读者可以根据自己的实际情况来选择。

“style”绑定

这个属性必须是控制style的了,这里我们将上面的示例改写:

 1 <div data-bind="style: { backgroundColor: cssName() }">
 2     我会变色
 3 </div>
 4 <div>
 5     <button type="button" data-bind="click: changeTest1">我变</button>
 6     <button type="button" data-bind="click: changeTest2">我再变</button>
 7 </div>
 8
 9
10     <script type="text/javascript">
11
12         var appViewModel = function () {
13             this.cssName = ko.observable("");
14             this.changeTest1 = function () {
15                 this.cssName("red");
16             };
17             this.changeTest2 = function () {
18                 this.cssName("green");
19             };
20         }
21
22         ko.applyBindings(new appViewModel());
23 </script>

“attr”绑定

有了这个就可以尽情的修改标签中的任何属性了,笔者再次就举一个关于切换a标签的href值,代码如下:

 1 <a data-bind="attr:{href:doHref}">快点我</a>
 2 <div>
 3     <button type="button" data-bind="click:changeTest1">换地址1</button>
 4     <button type="button" data-bind="click:changeTest2">换地址2</button>
 5 </div>
 6
 7
 8     <script type="text/javascript">
 9
10         var appViewModel = function () {
11             this.doHref = ko.observable("");
12             this.changeTest1 = function () {
13                 this.doHref("http://www.baidu.com");
14             };
15             this.changeTest2 = function () {
16                 this.doHref("http://www.cnblogs.com/");
17             };
18         }
19
20         ko.applyBindings(new appViewModel());
21     </script>

具体效果,copy代码走一遍就知道了。

Knockout学习之文本和外观绑定器

时间: 2024-11-05 19:03:15

Knockout学习之文本和外观绑定器的相关文章

KnockoutJS(4)-控制文本和外观绑定

控制文本和外观绑定 依赖关系:除了Knockout核心库之外,无依赖关系. 类别 目的 Visible绑定 Visible绑定通过绑定一个值来确定DOM元素显示或隐藏 Text绑定 Text绑定主要是让DOM元素显示参数值. 通常情况下,该绑定在<span>和<em>这样的元素上非常有用,而实际上你可以绑定任何元素. html 绑定 html绑定到DOM元素上,使得该元素显示的HTML值为你绑定的参数.如果在你的view model里声明HTML标记并且render的话,那非常有用

《ASP.NET MVC 4 实战》学习笔记 11:模型绑定器与值提供器

一.创建自定义模型绑定器: 利用请求数据塑造模型对象并将对象传递给动作参数的过程称为模型绑定(Model Binding). 大多数时候动作参数是对象的主键或其他唯一标识符,因此我们可以不必在所有的动作中都放置一段重复的数据访问代码(下面代码“\\Before”部分),而是使用一个自定义的模型绑定器(下面代码“\\After”部分).它能够在动作执行之前加载存储对象,于是动作不再以唯一标识符而是以持久化的对象类型作为参数. // Before public ViewResult Edit (Gu

knockoutJS学习笔记05:控制文本和外观绑定

测试数据: function Person(name,age){ var self = this; self.name = ko.observable(name); self.age = ko.observable(age); self.isShow = ko.observable(""); self.html = "<div>没有div</div>", self.isRed = true } var person = new Person(

knockout学习资料

一个靠谱的哥们整理的Knockout学习资料 Knockout学习之监控属性 Knockout学习之组合监控属性 Knockout学习之监控数组 Knockout学习之文本和外观绑定器 Knockout学习之控制流绑定器 Knockout学习之表单绑定器(上) Knockout学习之表单绑定器(下) Knockout学习之模板绑定器

Knockout学习之表单绑定器(上)

表单绑定器 “click”绑定 Click 绑定器可以将javascript函数绑定到指定的dom元素,并且再该元素被点击时将触发绑定的函数,大多数情况下都会使用button.input和a元素,当然其他可见的dom元素也是一样可以的.下面我们就简单的举一个例子: 1 <div> 2 你已经点击了<span data-bind="text:numberOfClicks" ></span> 3 <button data-bind="cl

Knockout学习之表单绑定器(下)

“hasFocus”绑定 hasFocus绑定器会将DOM元素的焦点状态与视图模型中的属性相关联,当你设置视图模型中关联的属性为true或false后,将能够设置关键的DOM元素是否获得焦点. 比如下面的例子将会演示如何使用通过代码设置焦点,并且当关联的标签获得焦点后显示一段文本: 1 <div> 2 <input type="text" data-bind="hasfocus: focusState" /> 3 <button typ

Knockout学习之控制流绑定器

控制流绑定器 “foreach”绑定 顾名思义,通过该绑定我们就可以将监控数组循环输出到页面中去了,当然我们还是先来段简单的示例,仅仅只是输出监控数组: 1 <ul data-bind="foreach:people" > 2 <li data-bind="text:Name"></li> 3 </ul> 4 5 6 <script type="text/javascript"> 7 8

C++11 学习笔记 std::function和bind绑定器

一.std::function C++中的可调用对象虽然具有比较统一操作形式(除了类成员指针之外,都是后面加括号进行调用),但定义方法五花八门.为了统一泛化函数对象,函数指针,引用函数,成员函数的指针的各种操作,让我们可以按更统一的方式写出更加泛化的代码,C++11推出了std::function. std::function是可调用对象的包装器.它是一个类模板,可以容纳除了类成员(函数)指针之外的所有可调用对象.通过指定它的模板参数,它可以用统一的方式处理函数,函数对象,函数指针,并允许保存和

Knockout学习之(1)

监控属性 Knockout包含以下三个核心特性: 1.监控属性和依赖跟踪 2.显式绑定 3.模板 下面我们将学习这三点中的第一点,在这之前我们先研究下MVVM模式和视图模型的概念. MVVM和视图模型 模型:用来存储应用中的数据.它处于业务领域中,并且包含了相关的属性以及操作,与用户界面独立.在使用OK时,你将经常使用ajax保持该模型与服务端同步. 视图模型:使用纯代码表示界面的数据和操作.比如,你要实现一个列表编辑功能,那么你的视图模型就需要维持一组数据项,同时还要提供添加和删除方法. 视图