knockoutJS-04之observableArray监控数组

1、下拉框使用监控数组

①使用observableArray定义数组

var my_list = ko.observableArray([{ 'name': '小红', 'age': '18' }, { 'name': '小明', 'age': '19' }, { 'name': '小白', 'age': '20' }])
②创建my_view_model
    var my_view_model = {
        'all_people': my_list
    }
③绑定监控
ko.applyBindings(my_view_model);
复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="knockout/knockout-3.5.1.js"></script>
    <!-- <script src="https://knockoutjs.com/downloads/knockout-3.5.1.js"></script> -->

</head>

<body>
    <p>-----------------------------------监控数组-----------------------------------</p>
    <select name="" id="" data-bind="options:all_people,optionsText:'name'"></select>
</body>
<script>

    var my_list = ko.observableArray([{ 'name': '小红', 'age': '18' }, { 'name': '小明', 'age': '19' }, { 'name': '小白', 'age': '20' }])
    var my_view_model = {
        'all_people': my_list
    }

    ko.applyBindings(my_view_model);
</script>

</html>
复制代码
运行

 2、foreach 遍历数组

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="knockout/knockout-3.5.1.js"></script>
    <!-- <script src="https://knockoutjs.com/downloads/knockout-3.5.1.js"></script> -->

</head>

<body>
    <p>-----------------------------------监控数组-----------------------------------</p>
    <select name="" id="" data-bind="options:all_people,optionsText:'name'"></select>
    <div data-bind="foreach:all_people">
        <p>姓名：<span data-bind="text:name"></span>,年龄：<span data-bind="text:age"></span></p>
    </div>
</body>
<script>

    var my_list = ko.observableArray([{ 'name': '小红', 'age': '18' }, { 'name': '小明', 'age': '19' }, { 'name': '小白', 'age': '20' }])
    var my_view_model = {
        'all_people': my_list
    }

    ko.applyBindings(my_view_model);
</script>

</html>
复制代码

运行截图

 3、添加数组元素

①使用observableArray监控数组

var my_list = ko.observableArray([{ 'name': '小红', 'age': '18' }, { 'name': '小明', 'age': '19' }, { 'name': '小白', 'age': '20' }])

②使用push添加元素

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="knockout/knockout-3.5.1.js"></script>
    <!-- <script src="https://knockoutjs.com/downloads/knockout-3.5.1.js"></script> -->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>
    <p>-----------------------------------监控数组-----------------------------------</p>
    <select name="" id="" data-bind="options:all_people,optionsText:'name'"></select>
    <div data-bind="foreach:all_people">
        <p>姓名：<span data-bind="text:name"></span>,年龄：<span data-bind="text:age"></span></p>
    </div>

    <input type="text" name="" id="input_name" placeholder="请输入姓名">
    <input type="number" name="" id="input_age" placeholder="请输入年龄">
    <button id="btn">点击</button>
</body>
<script>

    var my_list = ko.observableArray([{ 'name': '小红', 'age': '18' }, { 'name': '小明', 'age': '19' }, { 'name': '小白', 'age': '20' }])
    var my_view_model = {
        'all_people': my_list
    }

    ko.applyBindings(my_view_model);


    $(function () {
        $('#btn').click(function () {
            let value_name = $('#input_name').val()
            let value_age = $('#input_age').val()
            my_list.push({ name: value_name, age: value_age })
        })
    })
</script>

</html>
复制代码

运行截图

posted @   南风丶轻语  阅读(201)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 记一次.NET内存居高不下排查解决与启示
点击右上角即可分享
微信分享提示