（二）Knockout 文本与外观绑定
Visible
Visible binding会依据绑定的数据来决定相应的DOM元素是否隐藏，hidden或visible。
我们首先在js文件部分定义一个view model，这里我创建的是一个object而不是一个构造函数，个人分析认为，object类型的定义就是一种persistent view model，而构造函数类型的定义就是一种temporary view model，这个也许和pure computed observables中的性能有关，可和knockout学习笔记（四）联系起来。
<div data-bind="visible: shouldShowMessage">
You will see this message only when "shouldShowMessage" holds a true
value.
</div>
<script>
var viewModel = {
shouldShowMessage: ko.observable(true) // Message initially visible
};
viewModel.shouldShowMessage(false); //隐藏元素
//viewModel.shouldShowMessage(true); //显示元素
ko.applyBindings(viewModel);
</script>
text
Text binding会使得相应的DOM element的text部分变为参数的值。
<p>This is my text: <span data-bind="text: myText"></span></p>
<script>
var myViewModel = {
myText: ko.observable()
};
ko.applyBindings(myViewModel);
myViewModel.myText("Hello world!");
ko.applyBindings(viewModel);
</script>
输出结果：
This is my text: Hello world!
备注 1 ： 使用函数和值表达式
<p>This is my text: <span data-bind="text: myComputed"></span></p>
<script type="text/javascript">
var viewModel = {
myText: ko.observable(60),
};
viewModel.myComputed = ko.pureComputed(function () {
return this.myText() > 50 ? "Big" : "Small";
}, viewModel);
ko.applyBindings(viewModel);
</script>
输出结果：
This is my text: Big
备注2：关于HTML编码
如果我们传入text的参数中含有html的标签，页面中并不会将其以标签的形式展现，而是会以字符串的方式展现出来，例如：
myViewModel.myText("<i>Hello world!</i>");
输出结果：
This is my text: <i>Hello world!</i>
这样也可以防止HTML或是script的注入攻击。而有关html标签的绑定则需要参考html binding
备注3：无容器
在某些时候，我们需要在不指定元素的情况下直接插入text，此时我们可以使用无容器的语法来定义一个text binding。例如在option element中是不允许包含其他元素的，如果我们如下定义data-bind
<select>
<option>Item <span data-bind="text: myText"></span></option>
</select>
我们并不能得到view model中的observable，无容器的语法则是这样写的：
<select data-bind="foreach: myItems">
<option>Item <!--ko text: name--><!--/ko--></option>
</select>
<!--ko-->和<!--/ko-->扮演着开始标志和结束标志，它们定义了一个虚拟元素，knockout语法能够理解这种写法并像对待一个最真实元素那样去绑定相应的view model内的值。
完整的案例：
<select data-bind="foreach: myItems">
<option>Item <span data-bind="text: name"></span></option>
</select>
<select data-bind="foreach: myItems">
<option>Item <!--ko text: name--><!--/ko--></option>
</select>
<script type="text/javascript">
var vm = {
myItems: [
{ name: 'Item 1', id: 1},
{ name: 'Item 3', id: 3},
{ name: 'Item 4', id: 4}
]
};
ko.applyBindings(vm);
</script>
html
Html binding其实与text binding类似，只不过它的参数一般是带有html标签的，这样就可以自定义想要绑定的html元素。
下面是个很简单的例子：
var myViewModel = {
myHtml: ko.observable(),
}
ko.applyBindings(myViewModel);
myViewModel.myHtml("<a href='http://www.google.com'>Google</a>");
html
<p>My html element is: <span data-bind="html: myHtml"></span></p>
class与css
class绑定
<div data-bind="class: profitStatus">
Profit Information
</div>
<script type="text/javascript">
var viewModel = {
currentProfit: ko.observable(150000) //<div data-bind="class: profitStatus" class="profitPositive">
};
// Evalutes to a positive value, so initially we apply the "profitPositive" class
viewModel.profitStatus = ko.pureComputed(function() {
return this.currentProfit() < 0 ? "profitWarning" : "profitPositive";
}, viewModel);
// Causes the "profitPositive" class to be removed and "profitWarning" class to be added
viewModel.currentProfit(-50); //<div data-bind="class: profitStatus" class="profitWarning">
ko.applyBindings(viewModel);
</script>
改变的是class的值。
静态类
CSS binding主要用于根据view model的修改来更改UI中相应元素的class，从而依照CSS文件中已经定义好的样式来体现在页面中。一个简单的static css binding例子如下：
<style>
.redText {
color: red;
}
</style>
</head>
<body>
<p data-bind="css: { redText: myTest() > 0 }">Test for css binding</p>
<script type="text/javascript">
var myViewModel = {
myTest: ko.observable()
};
myViewModel.myTest(20);
console.info(myViewModel.myTest());
ko.applyBindings(myViewModel);
</script>
动态类
另外，我们也可以通过绑定一个computed observable来动态指定css class的值，这样的绑定称为dynamic css binding，简单的例子如下：
<style>
.redText {
color: red;
}
.blueText {
color: blue;
}
</style>
<p id="redText" data-bind="css: myComputed">This is red text.</p>
<p id="blueText" data-bind="css: myComputed">This is blue text.</p>
<script type="text/javascript">
var myViewModel1 = {
myTest: ko.observable(),
myComputed: ko.pureComputed(function() {
return myViewModel1.myTest() > 0 ? "redText" : "blueText";
})
};
var myViewModel2 = {
myTest: ko.observable(),
myComputed: ko.pureComputed(function() {
return myViewModel2.myTest() > 0 ? "redText" : "blueText";
})
};
ko.applyBindings(myViewModel1, document.getElementById("redText"));
ko.applyBindings(myViewModel2, document.getElementById("blueText"));
myViewModel1.myTest(20);
myViewModel2.myTest(-20);
</script>
静态类绑定多个class
css bidning是十分灵活的，对于static css binding，我们一般是以data-bind="css: {cssClass: viewModelProperty}"的形式来绑定css class，cssClass会根据viewModelProperty返回的值是 true 还是 false 来决定这个class现在是否需要使用。另外，我们也可以一次性设置多个css classes，简单的示例如下：
<style>
.redText {
color: red;
}
.textDecoration {
text-decoration: underline;
}
</style>
<p
data-bind="css: {redText: redTextDecision, textDecoration: textDecorationDecision}"
>
This is red text, and its text-decoration is underline.
</p>
<script type="text/javascript">
var myViewModel = {
redTextDecision: ko.observable(),
textDecorationDecision: ko.observable()
};
ko.applyBindings(myViewModel);
myViewModel.redTextDecision(true);
myViewModel.textDecorationDecision(true);
</script>
在上例中，我们是使用两个view model的property来决定两个不同的css class，KO也允许我们使用一个view model property来决定多个css class，可将上例的html部分改成如下形式：
<p data-bind="css: {'redText textDecoration': redTextDecision}">This is red text, and its text-decoration is underline.</p>
这里为了简便，并没有更改相应的view model property的名称，可以看到，当对多个css class进行设定的时候，我们需要将它们统一包含在引号中。
如果绑定的view model property属性是一个observable，则UI会根据该observable的变化来动态的增加或删去被绑定的css class，否则，UI只会在开始阶段设定一次css class，之后不再更新。
动态类绑定多个class
dynamic css binding的一般形式是这样的：data-bind="css: viewModelProperty"，UI会根据viewModelProperty返回的字符串（property本身可以是一个代表css class的字符串）来决定添加的css class的名称。如果property是一个observable，则在该observable改变的时候，UI会删去之前该observable所添加的class并重新设置为当前observable的值。在dynamic css binding中，我们可以让viewModelProperty添加多个css class，只需将这些css class以空格分开并统一以字符串的方式返回即可。一个简单的例子如下：
<style>
.redText {
color: red;
}
.textDecoration {
text-decoration: underline;
}
</style>
<p data-bind="css: textDecorationDecision">
This is red text, and its text-decoration is underline.
</p>
<script type="text/javascript">
var myViewModel = {
textDecorationDecision: ko.observable("textDecoration redText")
};
ko.applyBindings(myViewModel);
</script>
备注： 应用名称不是合法的 javascript 变量名的 css 类
对于某些带有特殊符号的css class，比如red-text，我们不能直接在data-bind中以data-bind="css: {red-text: redTextDecision}"的方式来设定，而是应该在这类css class外添加一对引号使其成为字符串常量，变成这样：data-bind="css: {'red-text': redTextDecision}"。
如果你想套用 CSS 类my-class你 ，不能这样写 ：
<div data-bind="css: { my-class: someValue }">...</div>
因为我的类在这一点上不是一个合法的标识符名称。解决方案很简单: 只需用引号包装标识符名称, 使其成为字符串文本, 这在 javascript 对象文本中是合法的。例如,
<div data-bind="css: { 'my-class': someValue }">...</div>
style
style binding是与css binding不同的控制页面样式的方式，css binding需要依赖css文件中对应的样式表，借由增加或删除css class来改变样式，而style binding则是直接在相应的元素上添加或删除style来改变页面的样式。一个简单的例子如下：
<p data-bind="style: {color: redTextDecision}">This is red text.</p>
<script type="text/javascript">
var myViewModel = {
redTextDecision: ko.observable("red")
};
ko.applyBindings(myViewModel);
</script>
与css binding类似，我们也可以一次性设定多个style，如下：
<p data-bind="style: {color: redTextDecision, align: alignDecision}">This is red text.</p>
如果绑定的viewModelProperty是一个observable，则每次observable改变的同时，UI会对对应的style进行更新；否则，UI只会设定一次style，之后不再改变。
有些style是带有特殊符号的，比如"text-decoration"，比如"font-size"。在这种情况下，直接在data-bind中填写style的原名是不妥的，我们须将其变更为"textDecoration"和"fontSize"，其他类似的情形以此类推。
Don’t write
{ font-weight: someValue };do write{ fontWeight: someValue }
Don’t write{ text-decoration: someValue };do write{ textDecoration: someValue }
attr
attr binding用于绑定某些元素的attribute，比如说a元素的title、href，img元素的src等。一个简单的例子如下：
<a data-bind="attr :{ href: url, title: description}">Google's website</a>
<img style="width: 100px; height: 100px" data-bind="attr: {src: imgUrl}" />
<script type="text/javascript">
var myViewModel = {
url: ko.observable("http://www.google.com"),
description: ko.observable("This is google's website"),
imgUrl: ko.observable("http://i1.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png")
};
ko.applyBindings(myViewModel);
</script>
如果绑定的viewModelProperty是一个observable，则每次observable改变时，UI均会更新相应的attribute；否则，UI只会设定一次attribute，之后不再更新。
当attribute name中带有连字符号时，我们只需在其外部添加一对引号即可。
参考：
CharlieYuki，KnockoutJs学习笔记（五）
（二）Knockout 文本与外观绑定的更多相关文章
- Knockout学习之文本和外观绑定器
文本和外观绑定器 “visible”绑定 该绑定主要用来让我们通过监控属性可以控制html文档的显示,只要绑定的监控属性为false.0.null或者undefined则隐藏该标签,否则显示.比如下面 ...
- KnockoutJS(4)-控制文本和外观绑定
控制文本和外观绑定 依赖关系:除了Knockout核心库之外,无依赖关系. 类别 目的 Visible绑定 Visible绑定通过绑定一个值来确定DOM元素显示或隐藏 Text绑定 Text绑定主要是 ...
- knockoutJS学习笔记05：控制文本和外观绑定
测试数据: function Person(name,age){ var self = this; self.name = ko.observable(name); self.age = ko.obs ...
- HTML 教程延伸阅读：改变文本的外观和含义
很多标签都可以用来改变文本的外观,并为文本关联其隐藏的含义.总地来说,这些标签可以分成两类:基于内容的样式(content-based style)和物理样式(physical style). 基于内 ...
- KnockOut文档--模板绑定
目的 模板绑定使用数据render模板,然后把渲染的结果填充到Dom树中.模板通过重复或嵌套块(通常为您的视图模型数据的函数)用一种简单,方便的方式来建立复杂的UI结构 . 有两种方式使用模板: Na ...
- css渲染（二） 文本
一.文本样式 首行缩进 text-indent 首行缩进是将段落的第一行缩进,这是常用的文本格式化效果.一般地,中文写作时开头空两格.[注意]该属性可以为负值:应用于: 块级元素(包括block和i ...
- deepin linux 学习笔记（二）——文本编辑器
目录 deepin linux 学习笔记(二)--文本编辑器 前言 nano 小巧的命令行编辑器 通用 编辑 定位 排版 配置 vim 思路独特的超级编辑器 命令模式 插入模式 底线模式(末行模式) ...
- 如何用html把文本框外观格式设为只显示底部的横线
html把文本框外观格式设为只显示底部的横线 <style> input[type='text']{background:none;border:none;border-bottom:1p ...
- 控制文本和外观------Attr Binding(attr属性绑定)
Attr Binding(attr属性绑定) 目的 attr 绑定提供了一种方式可以设置DOM元素的任何属性值.你可以设置img的src属性,连接的href属性.使用绑定,当模型属性改变的时候,它会自 ...
随机推荐
- 阿里云短信服务bug
接入阿里云短信服务,在springboot中写测试方法,执行到 IClientProfile profile = DefaultProfile.getProfile("cn-hangzhou ...
- rest framework 视图，路由
视图 在上面序列化的组件种已经用到了视图组件,即在视图函数部分进行逻辑操作. 但是很明显的弊端是,对每个表的增删改查加上 单条数据,需要用到 2个类 5个方法(增删改查,单数据查)才可以完整的实现,当 ...
- （四）窗口mainwindow
常用控件: lable: 可以放文本,图片,动态图片,链接 Text Edit: 富文本编辑框:多行文本,HTML,图片 Line Edit: 只能放一行 Plain Edit: 只能显示多行文本 ...
- django-url的分发
1)url的分发: 1,首先在全局的url里面的路径中写好,你要分发的路径名. 2,并且在你要分发的路径下,创好新的url文件. 在分发的路径名里面,把全局url里面的代码,复制过来 3,最后在浏览器 ...
- 【gdoi2018 day2】第二题 滑稽子图（subgraph）（性质DP+多项式）
题目大意 [gdoi2018 day2]第二题 滑稽子图(subgraph) 给你一颗树\(T\),以及一个常数\(K\),对于\(T\)的点集\(V\)的子集\(S\). 定义\(f(S)\)为点集 ...
- JavaFile、递归、字节流、字符流整理
File 1.1 File类的构造函数 当需要把内存中的数据存储到持久化设备上这个动作称为输出(写)Output操作. 当把持久设备上的数据读取到内存中的这个动作称为输入 ...
- Linux grep \t Tab 键失效
解决方法 1.'$' 有一个日志文件, 比如说有两列, 中间使用 \t制表符分割了. 则在grep查找的时候 使用: '$'\t''\+ 代替我们的\t制表符 - 2.-P grep -P '\ ...
- JavaScript 正则表达式基础语法
前言 正则表达式在人们的印象中可能是一堆无法理解的字符,但就是这些符号却实现了字符串的高效操作.通常的情况是,问题本身并不复杂,但没有正则表达式就成了大问题.javascript中的正则表达式作为相当 ...
- 算法第四版Question
1.ECLIPES标准输入流 ①Run As-->Run Configurations-->Commom-->Input File在Input File里面输入要读取的文本文件 这对 ...
- [物理学与PDEs]第3章第3节 电导率 $\sigma$ 为无穷时的磁流体力学方程组 3.3 磁场线``冻结''原理
磁场线``冻结''原理: 在 $\sigma=\infty$ 时, 初始时刻分布在同一磁场线上的质点, 在运动过程中会一直保持在同一磁场线上, 即磁场线好像``冻结''在物质上. 事实上, $\cfr ...