前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Knockout.Js官网学习(text绑定)

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

作者头像
aehyok
发布2018-09-11 13:05:15
2.1K0
发布2018-09-11 13:05:15
举报
文章被收录于专栏:技术博客技术博客

前言

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

简单绑定

代码语言:javascript
复制
Today's message is: <span data-bind="text: myMessage"></span> 

<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>   
<script type="text/javascript">    
    var viewModel = {        
        myMessage: ko.observable()     
    };
    viewModel.myMessage("Hello, world!");
    ko.applyBindings(viewModel);
</script>

    KO将参数值会设置在元素的innerText (IE)或textContent(Firefox和其它相似浏览器)属性上。原来的文本将会被覆盖。

    如果参数是监控属性observable的,那元素的text文本将根据参数值的变化而更新,如果不是,那元素的text文本将只设置一次并且以后不在更新。

    如果你传的是不是数字或者字符串(例如一个对象或者数组),那显示的文本将是yourParameter.toString()的等价内容。

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

 继续在上面的ViewModel中添加一个属性,并且添加一个依赖监控属性

代码语言:javascript
复制
price: ko.observable(24.95)
    viewModel.priceRating = ko.dependentObservable(
        function () {
         return this.price() > 50 ? "expensive" : "affordable";
        }, viewModel);

添加一个UI页面元素进行绑定

代码语言:javascript
复制
The item is <span data-bind="text: priceRating"></span> today.

现在,text文本将在“expensive”和“affordable”之间替换,取决于价格怎么改变。

关于HTML encoding

因为该绑定是设置元素的innerText或textContent (而不是innerHTML),所以它是安全的,没有HTML或者脚本注入的风险。例如:如果你编写如下代码:

代码语言:javascript
复制
viewModel.myMessage("<i>Hello, world!</i>");

 它不会显示斜体字,而是原样输出标签。如果你需要显示HTML内容,请参考html绑定.

关于IE 6的白空格whitespace

IE6有个奇怪的问题,如果 span里有空格的话,它将自动变成一个空的span。如果你想编写如下的代码的话,那Knockout将不起任何作用:

导航

1.KnockoutJs官网学习(简单了解和入门)

2.Knockout.Js官网学习(监控属性Observables)

3.Knockout.Js官网学习(数组observable)

4.Knockout.Js官网学习(visible绑定)

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2013-10-10 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档