博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

knockout 学习实例2 text

Posted on 2016-07-08 21:05  绝交  阅读(145)  评论(0)  编辑  收藏  举报 
<!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>