Konckout第三个实例：循环绑定 -- table列表数据的填充

传统js：拼接字符串，再写入指定标签中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <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: 20px;}
        </style>
    </head>
    <body>
        <div id="content1">
            <table>
                <thead>
                    <td>id</td>
                    <td>英文名</td>
                    <td>中文名</td>
                    <td>描述</td>
                </thead>
                <tbody id="tablebody"></tbody>
            </table>
        </div>
        
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/knockout30.js"></script>
        <script>
            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:"曾经是行星的行星"}
            ];
            function RenderPlanets(){
                var tablebody = $('#tablebody');
                var planetsString = "";
                for(var i in Planets){
                    planetsString += "<tr>";
                    planetsString += "<td>"+Planets[i].id+"</td>";
                    planetsString += "<td>"+Planets[i].englishName+"</td>";
                    planetsString += "<td>"+Planets[i].chineseName+"</td>";
                    planetsString += "<td>"+Planets[i].description+"</td>";
                    planetsString += "</tr>";
                }
                tablebody.html(planetsString);
            }
            $(function(){
                RenderPlanets();
            });
        </script>
    </body>
</html>

knockout绑定，并且可以动态添加

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <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: 20px;}
        </style>
    </head>
    <body>
        <div id="content1">
            <table>
                <thead>
                    <tr>
                        <td>id</td>
                        <td>英文名</td>
                        <td>中文名</td>
                        <td>描述</td>
                    </tr>
                </thead>
                <tbody id="tablebody" data-bind="foreach:Planets">
                    <tr>
                        <td data-bind="html:id"></td>
                        <!--<td data-bind="html:$index"></td>-->  <!--数组里有一个默认的id，从0开始-->
                        <td data-bind="html:englishName"></td>
                        <td data-bind="html:chineseName"></td>
                        <td data-bind="html:description"></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <a href="#" data-bind="click:newPlanet" style="border: 1px solid darkgoldenrod;">新增</a>
        
        <script src="js/jquery.js"></script>
        <script src="js/knockout30.js"></script>
        <script>
            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:"曾经是行星的行星"}
            ];
            $(function(){
                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>

 如果想在循环到地球的时候加一个标记，应该怎么办呢：

<tbody id="tablebody" data-bind="foreach:Planets">
    <tr>
        <td data-bind="html:id"></td>
        <!--<td data-bind="html:$index"></td>-->  <!--数组里有一个默认的id，从0开始-->
        <td data-bind="html:englishName"></td>
        <!--<td data-bind="html:chineseName"></td>-->
        <td data-bind="html:(chineseName == '地球' ? chineseName+'<b>[家]</b>':chineseName)"></td>
        <td data-bind="html:description"></td>
    </tr>
</tbody>

 

posted @ 2017-04-20 16:11  党兴明  阅读(542)  评论(0)  编辑  收藏  举报