Knockout使用foreach实现勾选复选框置顶列表效果

核心原则：Knockout 为数据驱动框架，无需手动操作DOM移动元素，只要调整绑定的observableArray顺序，foreach绑定会自动同步更新DOM位置，完全避免手动改DOM导致的绑定错乱问题。

实现逻辑 #

排序规则固定为：已选中项排在列表前部，未选中项排在后部；同选中状态的项保留初始相对顺序，这样勾选时项自动置顶，取消勾选时自动落回未选区域的原有位置，不会出现顺序乱跳。

具体代码 #

1. ViewModel 部分 #

// 列表项构造函数
function ListItem(config) {
    this.note = ko.observable(config.note);
    this.isSelected = ko.observable(!!config.isSelected);
    // 存储初始序号，保证同状态下顺序稳定
    this.originalIndex = config.originalIndex;
}

function PageViewModel() {
    const vm = this;
    vm.disableInput = ko.observable(false);
    vm.lists = ko.observableArray([]);

    // 列表排序方法
    vm.sortList = function () {
        vm.lists.sort((a, b) => {
            // 选中状态优先级最高，选中的排前面
            if (a.isSelected() !== b.isSelected()) {
                return a.isSelected() ? -1 : 1;
            }
            // 同状态按初始序号排序，保持原有相对位置
            return a.originalIndex - b.originalIndex;
        });
    };

    // 原模板中绑定的click处理方法
    vm.list = function (item) {
        // 这里写你原有的点击业务逻辑
        // 必须返回true，否则会拦截checkbox默认的勾选切换行为
        return true;
    };

    // 初始化列表数据，替换成你的实际数据源即可
    const initData = [
        { note: "选项A", isSelected: false },
        { note: "选项B", isSelected: false },
        { note: "选项C", isSelected: true }
    ];
    const initList = initData.map((item, index) => new ListItem({
        ...item,
        originalIndex: index
    }));
    vm.lists(initList);

    // 给每个项的选中状态加订阅，状态变化时自动重排
    vm.lists().forEach(item => {
        item.isSelected.subscribe(vm.sortList);
    });

    // 初始化时执行一次排序，把默认选中的项顶到前面
    vm.sortList();
}

ko.applyBindings(new PageViewModel());

2. 模板部分（修正了原代码中span未闭合的问题） #

<div data-bind="foreach: lists">
    <div class="checkbox list-item">
        <label>
            <input type="checkbox" data-bind="checked: isSelected, click: $parent.list, disable: $parent.disableInput()"/>
            <span data-bind="text: note"></span>
        </label>
    </div>
</div>

补充说明 #

• 如果列表支持动态新增项，新增时给新项分配不重复的originalIndex，给新项的isSelected加上排序订阅，新增完成后调用一次sortList即可正常生效
• 不推荐在click事件里手动修改isSelected值，交给checked绑定自动处理即可，避免状态不一致
• 这种实现方式下，不管是用户点击checkbox，还是代码里修改项的选中状态，都会自动触发排序，不需要额外绑定其他事件

内容的提问来源于stack exchange，提问作者siuri