Knockout学习（3）之observableArray，监控数组，列表（循环绑定）

最新推荐文章于 2024-01-19 11:19:34 发布

流觞曲水向东流

最新推荐文章于 2024-01-19 11:19:34 发布

阅读量5.2k

点赞数

分类专栏： Knockout 文章标签： Knockout

本文链接：https://blog.csdn.net/qq_33265875/article/details/80669301

版权

Knockout 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

ko对于数组列表，监控跟踪属性值关键字为：observableArray，

绑定值关键字为：foreach

@{
    ViewBag.Title = "Index3";
}

<h2>Index3</h2>
<head>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/KnockOut.js"></script>
    <script>
        $(function () {
            var UserInfos = [
                    { id: 1, name: "张三", age: "21", aclass: "1801" },
                    { id: 2, name: "李四", age: "22", aclass: "1802" },
                    { id: 3, name: "王五", age: "23", aclass: "1803" }
            ];
            var ViewModel = {};
            ViewModel = function ()
            {
                this.UserInfos = ko.observableArray(UserInfos);               
            }
            ko.applyBindings(ViewModel);          
        });
    </script>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>班级</td>
            </tr>
        </thead>
        <tbody data-bind="foreach:UserInfos">
            <tr>
                <td data-bind="text:id"></td>
                <td data-bind="text:(name=='张三'?'张三老师':name)"></td>@*ko里面也可以写逻辑代码：例如当循环到姓名为张三时，输出张三老师；*@
                <td data-bind="text:age"></td>
                <td data-bind="text:aclass"></td>
            </tr>
        </tbody>
    </table>
</body>

展示如下：

我们也可以动态新增，代码如下：

@{
    ViewBag.Title = "Index3";
}

<h2>Index3</h2>
<head>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/KnockOut.js"></script>
    <script src="~/Scripts/jquery.json.min.js"></script>
    <script src="~/Scripts/knockout-map.js"></script>
    <script>
        $(function () {
            var UserInfos = [
                    { id: 1, name: "张三", age: "21", aclass: "1801" },
                    { id: 2, name: "李四", age: "22", aclass: "1802" },
                    { id: 3, name: "王五", age: "23", aclass: "1803" }
            ];
            var ViewModel = {};
            ViewModel = function ()
            {
                this.UserInfos = ko.observableArray(UserInfos);
                this.addUser = function ()
                {
                    this.UserInfos.push({ id: -1, name: "新同学", age: "21", aclass: "1801" });
                }
            }
            ko.applyBindings(ViewModel);          
        });
    </script>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>班级</td>
                <td>ko自动排序</td>
            </tr>
        </thead>
        <tbody data-bind="foreach:UserInfos">
            <tr>
                <td data-bind="text:id"></td>
                <td data-bind="text:name"></td>
                <td data-bind="text:age"></td>
                <td data-bind="text:aclass"></td>
                <td data-bind="text:$index"></td>@*这里我新增了一列，在ko里面，有一个自动排序属性：$index,这样循环时，此列的值就会递增*@
            </tr>
        </tbody>
    </table>
    <br />
    <input value="新增" type="button" data-bind="click:addUser" />
</body>

效果如下：

流觞曲水向东流

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Knockout学习（3）之observableArray，监控数组，列表（循环绑定）

ko对于数组列表，监控跟踪属性值关键字为：observableArray，绑定值关键字为：foreach@{ ViewBag.Title = "Index3";}&lt;h2&gt;Index3&lt;/h2&gt;&lt;head&gt; &lt;script src="~/Scripts/jquery-1.10.2.mi...
复制链接

扫一扫