Knockout text绑定DOM的使用方法

简单绑定


代码如下:

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中添加一个属性，并且添加一个依赖监控属性


代码如下:

price: ko.observable(24.95)
    viewModel.priceRating = ko.dependentObservable(
        function () {
         return this.price() > 50 ? "expensive" : "affordable";
        }, viewModel);

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


代码如下:

The item is <span data-bind="text: priceRating"></span> today.

现在，text文本将在“expensive”和“affordable”之间替换，取决于价格怎么改变。
关于HTML encoding
因为该绑定是设置元素的innerText或textContent （而不是innerHTML），所以它是安全的，没有HTML或者脚本注入的风险。例如：如果你编写如下代码：


代码如下:

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

它不会显示斜体字，而是原样输出标签。如果你需要显示HTML内容，请参考html绑定.
关于IE 6的白空格whitespace
IE6有个奇怪的问题，如果 span里有空格的话，它将自动变成一个空的span。如果你想编写如下的代码的话，那Knockout将不起任何作用。

赞 (0)

相关推荐

  • Knockout visible绑定使用方法

    简单的绑定 首先还是先定义一个ViewModel 复制代码 代码如下: var AppViewModel = {        shouldShowMessage: ko.observable(true)  ///初始化的时候div是visible的         }; AppViewModel.shouldShowMessage = ko.observable(false);   ///现在hidden勒    ko.applyBindings( AppViewModel); 并且通过ko.

  • 用Javascript评估用户输入密码的强度（Knockout版）

    我们来看看如果使用Knockout更简单的来实现密码强度的验证. 原有代码请查看: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • Knockoutjs快速入门(经典)

    Knockoutjs快速入门(经典)

    Knockoutjs是一个JavaScript实现的MVVM框架.主要有如下几个功能: 1. Declarative bindings 2. Observables and dependency tracking 3. Templating 它对于分离前台的业务逻辑和视图简化数据绑定过程有显著的作用.闲言少叙,直接看例子,如何下载也不说了,如果用VS开发的话用Nuget就可以一键搞定. 1.基本绑定和依赖跟踪 首先需要定义一个ViewModel: 复制代码 代码如下: <script type=

  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】

    BootstrapTable与KnockoutJS相结合实现增删改查功能【一】

    Bootstrap是一个前端框架,解放Web开发者的好东东,展现出的UI非常高端大气上档次,理论上可以不用写一行css.只要在标签中加上合适的属性即可. KnockoutJS是一个JavaScript实现的MVVM框架.非常棒.比如列表数据项增减后,不需要重新刷新整个控件片段或自己写JS增删节点,只要预先定义模板和符合其语法定义的属性即可.简单的说,我们只需要关注数据的存取. 一.Knockout.js简介 1.Knockout.js和MVVM 如今,各种前端框架应接不暇,令人眼花缭乱,有时不得

  • BootstrapTable与KnockoutJS相结合实现增删改查功能【二】

    BootstrapTable与KnockoutJS相结合实现增删改查功能【二】

    在上篇文章给大家介绍了BootstrapTable与KnockoutJS相结合实现增删改查功能[一],介绍了下knockout.js的一些基础用法.接下来通过本文继续给大家介绍.如果你也打算用ko去做项目,且看看吧! Bootstrap是一个前端框架,解放Web开发者的好东东,展现出的UI非常高端大气上档次,理论上可以不用写一行css.只要在标签中加上合适的属性即可. KnockoutJS是一个JavaScript实现的MVVM框架.非常棒.比如列表数据项增减后,不需要重新刷新整个控件片段或自己

  • Knockoutjs的环境搭建教程

    最近要在项目中使用Knockoutjs,因此今天就首先研究了一下Knockoutjs的环境搭建,并进行了一个简单的测试. 首先要到http://knockoutjs.com/index.html下载最新版本的Knockoutjs,笔者这里下载的是knockout-2.2.0.js.然后新建一个.html文件,在html文档中加入以下的语句导入此js: <script type="text/javascript" src="knockout-2.2.0.js"&

  • Knockout数组(observable)使用详解示例

    1.简单举例 复制代码 代码如下: <script type="text/javascript">    var myObservableArray = ko.observableArray();  ///初始化一个空的数组    myObservableArray.push("Some Value");          ///向数组中添加一个项</script> 2.关键点:监控数组跟踪的是数组里的对象,而不是这些对象自身的状态.简单说,

  • Knockoutjs 学习系列(二)花式捆绑

    Knockoutjs 学习系列(二)花式捆绑

    在上一篇Knockoutjs 学习系列(一)ko初体验文章中提到,ko中的 data-bind = "XX:OO"绑定大法除了可以绑定text.value等内容,还可以绑定visible.style等外观属性,也可以绑定click.textInput等各种事件,甚至还能控制程序流程.各种花式捆绑,绝对满足你的幻想. 下面简单讲讲各种绑定的使用,主要根据被绑定的属性分成表现类.流程类和交互类三种. 表现类属性 表现类的绑定属性有visible.text.html.css.style.at

  • Knockoutjs 学习系列(一)ko初体验

    Knockoutjs 学习系列(一)ko初体验

    MVVM框架中Angular是好,但这么大而全的框架,学习难度可不低呢,上手起码也得要个一两周吧.而knockoutjs专注于数据绑定,只需一两天就可以投入使用了,学习成本不要太低!在前端进化如此迅速的时代,学习成本也是不得不考虑的一个因素.很多时候其实我们的项目并没那么复杂,也并不需要万能的框架,更需要的反而是简单顺手的工具. Before Knockoutjs 假设我们做一个订单系统,需要显示商品单价,然后可以根据输入数量计算出总价并显示出来.使用原生代码也很容易实现,效果: 代码如下: <

  • 深入浅析knockout源码分析之订阅

    深入浅析knockout源码分析之订阅

    Knockout.js是什么? Knockout是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良好的显示和编辑功能的用户界面.任何时候你的局部UI内容需要自动更新(比如:依赖于用户行为的改变或者外部的数据源发生变化),KO都可以很简单的帮你实现,并且非常易于维护. 一.主类关系图 二.类职责 2.1.observable(普通监控对象类) observable(他其是一个function)的内部实现: 1.首先声

  • ko knockoutjs动态属性绑定技巧应用

    ko knockoutjs动态属性绑定技巧应用

    knockoutjs 简称 ko ko的动态属性是指,ViewModel不确定的属性,而后期却需要的属性. 什么是不确定属性,比如ListModel如果 编辑某一项,想把这一项的状态变更为Edit.数据并不包括Edit属性,mvvm绑定时,会发现报错. 那么一定需要拓展ko才能达到我们的目的. 首先来认识有值属性绑定,和 无值属性绑定: 一.有值属性绑定: JS模型: 复制代码 代码如下: $(function () { var viewModel = function () { var sel

随机推荐