目的

DOM元素显示文本的值是你传递的参数,前提是text先绑定到该元素上

典型的常用元素 <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>

参数

  • 主要参数

    • Knockout 会把参数值设置到元素文本节点上,节点上任何存在的内容将会被覆盖重写

    • 这个参数是一个监控属性值,任何时候在值被改变的时候它绑定元素text将会触发更新,假如不是一个监控属性,它仅仅就是text,不会更新
    • 假如你提供一些非数字或者字符串(举例来说,你对象或者数组,那显示的文本将是yourParameter.toString()的等价内容。
  • 附加参数

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

如果你想要以编程方式决定text的取值,一个选择是去创建一个 computed 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.computed(function() {
return this.price() > 50 ? "expensive" : "affordable";
}, viewModel);
</script>

如上,现在你的text将会在“expensive” 和“affordable”选择,每当price改变的时候.

也许,你只是想做一些简单的操作,你不需要是创建一个依赖监控属性。你能通过任意的javascript表达式去绑定text,

例如:

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

同样的结果,但我们不需要再声明priceRating依赖监控属性

注2:关于HTML编码

因为这个绑定,设置你的文本值使用一个文本节点,所以它是安全的如果设置任何的字符串的值,没有HTML或者脚本注入的风险

例如,如果你这样写:

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

这个斜体的文本将不会渲染出来,而是原样输出标签。如果你需要显示HTML内容,请参考html绑定.

注3:不能在一个容器元素中用“text”

有时,你想要用KO设置一text,但是text绑定不能包含一个额外的元素

例如,在一个option节点中,你不允包含其他的元素,所以下面将不会工作。

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

为了处理这样的情况,你能用containerless语法,它是基于注释标签

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

<!--ko-->和<!--/ko—> ,注释是充当开始/结束标记,定义一个‘virtual element’在包含的标记内,

Knockout能理解virtual element的语法规则,并且能够绑定好,如果你有一个真正的容器元素

注4: 关于IE6空白空格的怪癖

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核心类库外,无依赖。

Knockout 新版应用开发教程之"text"绑定的更多相关文章

  1. Knockout 新版应用开发教程之创建view models与监控属性

    最近抽出点时间研究MVVM,包括司徒正美的avalon,google的angular,以及Knockout,博客园Tom的Knockout指南 时隔2年了,ko更新了不少,所以文档也相应的变化了,所以 ...

  2. Knockout 新版应用开发教程之"visible"绑定

    "visible" 绑定 用途 DOM元素的显示或者隐藏是根据绑定的值来的,前提是将visible绑定给该元素 例子 <div data-bind="visible ...

  3. Knockout.Js官网学习(text绑定)

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

  4. Knockout 新版应用开发教程之Computed Observables

    Computed Observables 如果你有监控属性firstName和lastName的话,此时如果你想要显示全名? 这个时候computed(以前叫做依赖)监控属性就出马了,这是一个函数用来 ...

  5. Knockout 新版应用开发教程之Observable Arrays

    假如你想到侦测和相应一个对象的改变,假如你想要侦测和响应一一组合集的改变,就要用observableArray 在许多场景都是很有用的,比如你要在UI上需要显示/编辑的一个列表数据集合,然后对集合进行 ...

  6. Knockout 新版应用开发教程之Observable与computed

    KO是什么? KO不是万能的,它的出现主要是为了方便的解决下面的问题: UI元素较多,用户交互比较频繁,需要编写大量的手工代码维护UI元素的状态.样式等属性? UI元素之间关系比较紧密,比如操作一个元 ...

  7. Knockout v3.4.0 中文版教程-11-控制文本内容和外观-text绑定

    2. text绑定 目的 text绑定把传入的参数通过关联的DOM元素来显示文本值. 通常这对像<span>或<em>标签等使用,但技术上你可以对任何元素使用该绑定. 例子 T ...

  8. knockout之各种数据绑定方法:text、attr、visible、html、css、style绑定

    http://knockoutjs.com/documentation/attr-binding.html(Knockout官网文档) 1.text绑定 目的:text 绑定到DOM元素上,使得该元素 ...

  9. Taurus.MVC 微服务框架 入门开发教程:项目部署:2、让Kestrel支持绑定多个域名转发,替代Ngnix使用。

    系列目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 本系列第一篇:Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单 ...

随机推荐

  1. 【锁】Oracle锁系列

    [锁]Oracle锁系列 1  BLOG文档结构图 2  前言部分 2.1  导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你所不知道的知识,~O(∩_∩)O~: ...

  2. linux平台下防火墙iptables原理(转)

    原文地址:http://www.cnblogs.com/ggjucheng/archive/2012/08/19/2646466.html iptables简介 netfilter/iptables( ...

  3. 【VerySky原创】RPR_ABAP_SOURCE_SCAN

    [VerySky原创]RPR_ABAP_SOURCE_SCAN 扫描 ABAP 报表源

  4. 如何实现在H5里调起高德地图APP?(下)

    这一篇文章将告诉您,如果直接打开高德地图APP,并展示路线规划.适合有定位的移动设备,可以查询到从“我的位置”到目的地的路径规划,并直接导航. 场景二.调起高德地图的路线规划功能 导航是目前JSAPI ...

  5. WebClient的异步处理

    using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Te ...

  6. iOS crash 异常捕获

    // //  UncaughtExceptionHandler.m //  UncaughtExceptions // //  Created by Matt Gallagher on 2010/05 ...

  7. delphi使用outputdebugstring调试程序和写系统日志

    delphi使用outputdebugstring调试程序和写系统日志 procedure TForm1.btn1Click(Sender: TObject); begin OutputDebugSt ...

  8. [Aaronyang] 写给自己的WPF4.5 笔记23 [3d交互与动画 4/4]

    效果图预览: 1. 3d中的命中测试 我新建了一个空的窗口,用zam做了一个长方体,深度很小.然后导出xaml <Viewport3D x:Name="ZAM3DViewport3D& ...

  9. 使用dynamic类型改进反射

    首先还是声明一下,使用场景: 1.如果编译时函数名称确定,对象类型运行时确定,那么运用dynamic是一个好主意.2.如果编译时函数名称确定,对象类型在编译时也确定,那就既不需要反射也不需要dynam ...

  10. ecshop 加广告出现广告位的宽度值必须在1到1024之间

    打开 admin/ad_position.php这个文件,搜索1024,这里你会搜到两个地方 在236行左右 if ($ad_width > 1024 || $ad_width < 1) ...