Avalon基础视频教程-全选案例问题

问题:

这个全选反选,我在测试的时候,初始数据里的有checked:true, 有默认选中项,但是在绑定监听data-duplex-changed="checkAll"后,页面在第一次加载的时候就默认触发了一次checkAll事件,因为allchecked初始值为false, 刚加载的时候全选是未选中的,这导致了本来应该选中的列表项也全部取消了选中状态,变成未选中了,求解

----------------------------------------------------

解答:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>select all</title>

    <script src="avalon.js"></script>

    <script>

        var model = avalon.define({

            $id: "test",

            data: [],

            allchecked: false,

            checkAll: function() {

                var bool = model.allchecked = this.checked;

                model.data.forEach(function(el) {

                    el.checked = bool;

                });

            },

            checkOne: function() {

                if (!this.checked) {

                    model.allchecked = false;

                } else {

                    model.allchecked = model.data.every(function(el) {

                        return el.checked;

                    });

                }

            }

        });


        avalon.ready(function() {

            model.data = [{checked: true}, {checked: false}, {checked: false}];

        });

    </script>

</head>

<body>

    <table ms-controller="test" border="1">

        <tr>

            <td><input type="checkbox" ms-duplex-checked="allchecked" data-duplex-changed="checkAll"/>全选</td>

        </tr>

        <tr ms-repeat="data">

            <td><input type="checkbox" ms-duplex-checked="el.checked" data-duplex-changed="checkOne"/>xxxxxxxxxxxx</td>

        </tr>

    </table>

</body>

</html>


你可能感兴趣的:(全选案例问题)