<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

Today‘s message is:<span data-bind="text:myMessage"></span>

<script type="text/javascript">

var myViewModel = {

    myMessage:ko.observable()

};

ko.applyBindings(myViewModel);

setTimeout(function(){

myViewModel.myMessage("Hello, world!");

},2000);

</script>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

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

<script type="text/javascript">

    var viewModel = {

        price: ko.observable(24.95)

    };

    viewModel.priceRating = ko.pureComputed(function() {

        return this.price() > 50 ? "expensive" : "affordable";

    }, viewModel);

    ko.applyBindings(viewModel);

</script>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

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

<script type="text/javascript">

    var viewModel = {

        price: ko.observable(24.95)

    };

    ko.applyBindings(viewModel);

</script>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

Today‘s message is:<span data-bind="text:myMessage"></span>

<script type="text/javascript">

    var viewModel = {

        myMessage:ko.observable()

    };

    ko.applyBindings(viewModel);

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

</script>

</body>

</html>

这个是插不入文本不是html如果想插入html请吧text换成html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<ul data-bind="foreach: items">

     <li><span data-bind="text:name"></span></li>

 </ul> 

<script type="text/javascript">

    var viewModel = {

        items:ko.observableArray([{'name':"111"},{'name':"22222"}])

        // items:[{'name':"111"},{'name':"22222"}]

    };

    ko.applyBindings(viewModel);

    viewModel.items.push({name:'3333'})

</script>

</body>

</html>

knockout 学习实例2 text的更多相关文章

  1. knockout 学习实例7 foreach

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. knockout 学习实例6 attr

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. knockout 学习实例5 style

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>&l ...

  4. knockout 学习实例4 css

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. knockout 学习实例3 html

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. Knockout学习地址

    Knockout.js是什么? Knockout是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良好的显示和编辑功能的 ...

  7. [前端学习]vue的指令学习记录 vu-if | text | for | on | model | bind | pre

    vue的指令学习记录 vue-if | text | for | on | model - 目录 vue的指令学习记录 vue-if | text | for | on | model ... 预备 ...

  8. knockout学习笔记目录

    关于knockout学习系列的文章已经写完,这里主要是做个总结,并且将目录罗列出来,方便查看.欢迎各位大神拍砖和讨论. 总结 kncokout是一个轻量级的UI类库,通过MVVM模式使前端的UI简单话 ...

  9. Ant学习实例

    ant   目录(?)[+] Ant学习实例 安装Ant 基础元素 project元素 target元素 property元素 完整示例   Ant学习实例 1.安装Ant 先从http://ant. ...

随机推荐

  1. web组件

    慕课网:http://www.imooc.com/learn/99 js 在实战中的分层: 应用层 框架组件-框架通用组件.定制组件.独立组件 框架core(框架核心层) 浏览器底层

  2. hibernateValidate

    1.创建主页面 <form action="${pageContext.request.contextPath }/first.do" method="post&q ...

  3. 2014-07-29 Asp.Net 中级工程师 笔试题

    一.选择题    1.下列描述错误的是() A  类不可以被多重继承而接口可以: B  抽象类自身可以定义成员而接口不可以: C  抽象类和接口都不能被实例化: D   一个类可以继承多个基类和多个基 ...

  4. sphinx 源码阅读之分词，压缩索引，倒排——单词对应的文档ID列表本质和lucene无异 也是外部排序再压缩 解压的时候需要全部扫描doc_ids列表偏移量相加获得最终的文档ID

    转自:http://github.tiankonguse.com/blog/2014/12/03/sphinx-token-inverted-sort.html 外部排序 现在我们的背景是有16个已经 ...

  5. ubuntu 下创建桌面快捷方式

    1)新建文件eclipse.desktop,命令如下: sudo vim /usr/share/applications/eclipse.desktop 2)在新建文件中添加如下内容并保存: [Des ...

  6. 搭建mysql5.626及如何去官网下载历史版本数据库

    MySQL官网下载历史版本 网上搜索MySQL官网 2 查询所有的归档文件   点击进入服务器列表   列表中默认只有Windows 版本的,可选择其它版本,但无法进行查询   查看网页元素   发现 ...

  7. [转]解决ubuntu下面putty不能连接RS232串口（USB2COM线）

    http://m.blog.csdn.net/blog/wuyanrobert_tjsd/33045255 最后还是sudo了,感觉注销后没有加入dialout组

  8. android 自定义view -- 实现自定义 邮箱验证的Edittext

    //onFinishInflate 当View中所有的子控件均被映射成xml后触发 /** * 实现自定义 实现邮箱验证的EidtText */public class CustomEditText ...

  9. php超全局数组变量

    (1)$_SERVER 服务器的相关信息 (2)$_GET 接收用户通过url向服务器传的参数  $POST 接收用户通过http协议向服务器传递的参数 发送get请求 <a href=&quo ...

  10. JavaScript基础--内部类(九)

    js的内部类javascript 中本身提供一些,可以直接使用的类,这种类就是内部类,主要有:ObjectArrayMathBooleanStringRegExpDateNumber 1.内部类分类从 ...