Knockout动态foreach实现：根据CoverLevel切换列表展示

1. 定义ViewModel #

在JS中构建符合Knockout规范的ViewModel，核心通过计算属性根据选中的CoverLevel动态返回对应数据源：

function MyViewModel() {
    var self = this;
    
    // 定义两个字符串列表
    self.oneStar = ['a', 'b', 'c'];
    self.twoStar = ['d', 'e', 'f'];
    
    // 可观察属性，绑定单选按钮选中状态，初始值设为'one'对应oneStar
    self.CoverLevel = ko.observable('one');
    
    // 计算属性：根据CoverLevel当前值返回对应数据源
    self.currentDataSource = ko.computed(function() {
        return self.CoverLevel() === 'one' ? self.oneStar : self.twoStar;
    });
}

// 激活ViewModel
ko.applyBindings(new MyViewModel());

2. MVC视图中的绑定代码 #

在Razor视图里完成单选按钮与foreach循环的正确绑定：

<!-- 单选按钮组：绑定checked到CoverLevel，用value区分选项 -->
<label>
    <input type="radio" name="coverLevel" value="one" data-bind="checked: CoverLevel" />
    一星列表
</label>
<label>
    <input type="radio" name="coverLevel" value="two" data-bind="checked: CoverLevel" />
    二星列表
</label>

<!-- 动态切换的foreach循环，绑定到计算属性currentDataSource -->
<ul data-bind="foreach: currentDataSource">
    <li data-bind="text: $data"></li>
</ul>

关键说明 #

• 计算属性currentDataSource会自动监听CoverLevel的变化，单选按钮切换时，计算属性会重新求值，foreach会自动更新渲染内容，这是Knockout响应式编程的标准实现方式。
• 单选按钮的checked绑定直接关联CoverLevel可观察属性，通过value属性设置标识字符串（'one'/'two'），确保选中状态能正确同步到ViewModel。
• 将数据源切换逻辑放在ViewModel的计算属性中，避免在视图中编写复杂判断，符合MVVM职责分离原则，代码更易维护。

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