码迷,mamicode.com
首页 > 其他好文 > 详细

KnockOut循环绑定

时间:2016-06-29 20:33:22      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:

<!doctype html>
<html >
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>
    KNOCKOUT LESSON 2
  </title>
  <link rel="stylesheet" type="text/css" href="css/main.css" />
  <style>
  table{border-collapse:collapse;border-spacing:0}
  table {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
}
table th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
}
table td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
}
  #content1{padding:16px;}
  </style>
  <script type="text/javascript" src="scripts/knockout30.js"></script>
  </head>

  <body>


    <div id="content1">
        <table>
            <thead>
                <tr>
                    <th>id</th>
                    <th>英文名</th>
                    <th>中文名</th>
                    <th>描述</th>
                </tr>
            </thead>
            <tbody id="tableBody" data-bind="foreach:Planets" >
                <tr>
                    <td data-bind="html:$index"></td>
                    <td data-bind="html: englishName "></td>
                    <td data-bind="html:(chineseName == ‘金星‘ ?  ‘金星漂亮‘ : chineseName)"></td>
                    <td data-bind="html:description"></td>
                </tr>
            </tbody>
        </table>
    </div>
    <a href="#" data-bind="click:newPlanet">新增</a>

    <script type="text/javascript" src="scripts/jQuery183.js"></script>
    <script>
        /*
        Mercury
        Venus
        Earth
        Mars
        Jupiter
        Saturn
        Uranus
        Neptune
        Pluto
        */

        var  Planets = [
            {id:1,englishName:"Mercury",chineseName:"水星",description:"离太阳最近的一颗行星"},
            {id:2,englishName:"Venus",chineseName:"金星",description:"拥有非常厚的大气层的一颗行星"},
            {id:3,englishName:"Earth",chineseName:"地球",description:"我们的家园"},
            {id:4,englishName:"Mars",chineseName:"火星",description:"一颗红色的星球"},
            {id:5,englishName:"Jupiter",chineseName:"木星",description:"太阳系最大的行星"},
            {id:6,englishName:"Saturn",chineseName:"土星",description:"拥有最美丽光环的行星"},
            {id:7,englishName:"Uranus",chineseName:"天王星",description:"内核是个巨大的海洋(8000千米)"},
            {id:8,englishName:"Neptune",chineseName:"海王星",description:"一颗优雅的淡蓝色行星"},
            {id:9,englishName:"Pluto",chineseName:"冥王星",description:"曾经是行星的行星"}
        ];


        $(document).ready(function(){

            //RenderPlanets();

           var num=0;

            var  ViewModel = function(){
                var self = this;
                self.Planets = ko.observableArray(Planets);
                self.newPlanet = function(){
                    self.Planets.push({id:10,englishName:"unknow",chineseName:"未知行星",description:"等待人类去发现"});
                    return false;
                }
            };
            var  currentViewModel = new ViewModel();
            ko.applyBindings(currentViewModel);


        });
    </script>

  </body>
</html>

 

KnockOut循环绑定

标签:

原文地址:http://www.cnblogs.com/yexiangwang/p/5628049.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!