Text绑定

目的

Text绑定主要是让DOM元素显示参数值。

通常情况下,该绑定在<span>和<em>这样的元素上非常有用,而实际上你可以绑定任何元素。

示例

1
2
3
4
5
6
7
8
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将参数值设置为元素内容。元素之前的内容将会被覆盖。

如果参数是一个observable值,text绑定将会在值变化时更新元素text内容。如果参数不是observable值,text绑定仅仅会设置元素内容一次,以后不会再更新。

如果你传入的不是一个值或者一个字符串(比如:你传入一个对象或者数组)那么显示的文本将是yourParameter.toString()的结果。

其他参数

传递多次text时使用这种写法

<div data-bind="text:myText1"></div>
<div data-bind="text:myText2"></div>

<script>
var viewModel = {
    myText1:ko.observable("nihao"),
    myText2:ko.observable("China")
};
ko.applyBindings(viewModel);
</script>

注意事项

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

如果你想text值可编程化,一种选择是创建计算属性,然后在运算函数中编码决定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);

  ko.applyBindings(viewModel);
</script>

现在,text值将会在“expensive”和“affordable”之间选择,而这主要取决于“price ”的变化。
然而,假如你按照示例中的方式你则不需要创建计算属性。你可以传入任意的JavaScript表达式进行text绑定。

例如:这个还没弄明白

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

注2:关于HTML编码

由于text绑定是利用元素的text节点属性来设置文本值,你可以很安全的设置任何内容而不用担心HTML和脚本注入风险。例如,如果你输入以下内容:

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

它将不会显示一个斜体文本,而是按原样进行标签输出。

如果你想设置一个HTML内容,你可以参数HTML绑定。

注3:使用“text”而没有一个容器元素   使用<!--ko--> 和<!--/ko-->

有时你可能需要使用Knockout在不使用多余的元素的情况下通过text绑定来设置文本内容。例如,在option元素中是不允许存在其他元素的,所以下面的绑定是无法正常工作的。

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

为了解决这个问题,你可以使用容器语法,它基于一个注释元素。

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

<!--ko--> 和<!--/ko--> 注释标记作为起始和结束符,定义一个“虚拟元素”,里面包含了标记,Knockout能够识别这种虚拟元素语法和绑定作为你需要的容器元素而存在。

注4:一个关于IE6 白空格

IE6有一个奇怪的现象,如果span有空格的话,它会变成一个空span,如果你编写以下代码,Knockout不会起任何作用。

1
Welcome, <span data-bind="text: userName"></span> to our web site.

IE6不会显示span中间的那个空格,如果你想避免这个问题,你可以在<span>中输入任意内容。比如:

1
Welcome, <span data-bind="text: userName">&nbsp;</span> to our web site.

其他浏览器或者版本较新的IE浏览器不会出现这个问题。

Text 绑定的更多相关文章

  1. Knockout 新版应用开发教程之"text"绑定

    目的 DOM元素显示文本的值是你传递的参数,前提是text先绑定到该元素上 典型的常用元素 <span>或者<em>习惯性的用来显示文本,但是在技术上来说你可以用任何元素的. ...

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

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

  3. text绑定(The "text" binding)

    目的 text绑定可以使你传递的参数做为文本显示到相关的DOM元素里. 一般会用在如<span>或者<em>这类元素来显示文本,但从技术来讲它可以绑定到任何元素. 示例 Tod ...

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

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

  5. Knockout.js Text绑定

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

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

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

  7. Android中Service通信(二)——绑定Service进行通信

    一.把输入文本的数据同步到服务的实例(如何执行服务的内部代码) 绑定服务比启动服务更加方便高效,绑定服务中的直接方法调用比Intent作为载体传输更为快捷得多. 1.activity_main.xml ...

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

    测试数据: function Person(name,age){ var self = this; self.name = ko.observable(name); self.age = ko.obs ...

  9. MVVM架构~Knockoutjs系列之text,value,attr,visible,with的数据绑定

    返回目录 Knockoutjs是微软mvc4里一个新东西,用这在MVC环境里实现MVVM,小微这次没有大张旗鼓,而是愉愉的为我们开发者嵌入了一个实现MVVM的插件,这下面的几篇文章中,我和大家将一起去 ...

随机推荐

  1. [转]理解WSRF之一 使用WS-ResourceProperties (整理自IBM网站)

    理解 WSRF第1部分-使用 WS-ResourceProperties   本 教程是一个由 4 部分组成的系列文章中的第 1 部分,该系列介绍 WSRF(Web Services Resource ...

  2. [Unity3D]调用Android接口

    简介 有一些手机功能,Unity没有提供相应的接口,例如震动,例如不锁屏,例如GPS,例如... 有太多的特殊功能Unity都没有提供接口,这时候,我们就需要通过使用Android原生的ADT编辑器去 ...

  3. php 封装分页查询类

    <?php /** file: page.class.php 完美分页类 Page */ class Page { private $total; //数据表中总记录数 private $lis ...

  4. hdu3033 分组背包

    //Accepted 896 KB 156 ms //http://blog.csdn.net/juststeps/article/details/8712150 //dp[i][l]=max(dp[ ...

  5. hdu 2048

    PS:WA了两次...主要是没注意到fac的大小好像只能写到9...要用long long型递归求阶乘... 然后就是错排公式...百度下.. 代码: #include "stdio.h&q ...

  6. BZOJ 1853 幸运数字

    需要优化一波常数. 以及刚才那个版本是错的. #include<iostream> #include<cstdio> #include<cstring> #incl ...

  7. 【LEETCODE OJ】Clone Graph

    Problem link: http://oj.leetcode.com/problems/clone-graph/ This problem is very similar to "Cop ...

  8. HDU 4004

    http://acm.hdu.edu.cn/showproblem.php?pid=4004 题意:青蛙过长L的河,只能落在石头上,石头数量是n,给出n个坐标,至多跳m次,求在可以过河的条件下,青蛙跳 ...

  9. nginx模块_使用gdb调试nginx源码

    工欲善其事必先利其器,如何使用调试工具gdb一步步调试nginx是了解nginx的重要手段. ps:本文的目标人群是像我这样初接触Unix编程的同学,如果有什么地方错误请指正. 熟悉gdb的使用 这里 ...

  10. xcrun: error: active developer path ("/Volumes/Xcode/Xcode6-Beta.app/Contents/Developer") does not exist, use xcode-select to change

    When using MacOS with xcode6.4, i always meet these error: xcrun: error: active developer path (&quo ...