Question

我有一个看起来像的ViewModel：

{
    empName: [
        { name: 'NAME1' },
        { name: 'NAME2' }
    ]        
}

我希望在使用switch语句循环遍历empName属性时，根据我的name显示不同的部门名称。输出是：

部门1 部门2

我尝试了以下内容：

<ul data-bind="foreach: empName">
        <div data-bind="switch: name">
        <div data-bind="case: 'Name1'">
            Department 1
        </div>
        <div data-bind="case: 'Name2'">
            Department 2
        </div>

        <div data-bind="case: $default">
        </div>
    </div>

但我得到以下输出：

部门1 部门2 部门1 部门2

我怎样才能做到这一点？

Answer 1

为什么不重新考虑问题并将此逻辑转换为函数？根据经验，我尽量保持我的绑定尽可能简单，并将逻辑放入我的javascript。

以下是一个完整的例子：

var viewModel = {
   empName: [
        { name: 'NAME1' },
        { name: 'NAME2' }
   ]        
};

viewModel.departmentName = function(name) {
    var departmentName = "Department ";

    switch (name) {
        case "NAME2":
            departmentName += "2";
            break;
        case "NAME1":
        default:
            departmentName += "1";
            break;
    }

    return departmentName; 
}.bind(viewModel);

ko.applyBindings(viewModel);

然后在你的标记中：

<ul data-bind="foreach: empName">
    <li data-bind="text: viewModel.departmentName(name)"></li>
</ul>

输出：

部门1 部门2

<强> JSFiddle Demo

<小时/> 在旁注中，如果你真的只有两个案例（我假设你没有，你刚刚简化了这篇文章），那么在departmentName函数中使用三元运算符：

return name === "NAME2" ? "Department 2" : "Department 1";

Answer 2

我的两分钱!! Knockout没有switch case语句。正如RP Niemeyer

所建议的那样

迈克尔·贝斯特的开关/案例装订（https://github.com/mbest/knockout-switch-case）非常灵活可以让你轻松处理这个和更复杂的（更多的状态比真/假）。

否则你可以使用条件绑定：

    <!-- ko if: name == 'NAME1' -->
    <div data-bind="if: name == 'NAME1'">Department 1</div>
    <!-- /ko -->

此外，

<div data-bind="if: name == 'NAME1'">Department 1</div>

Demo

Answer 3

没有开关，但你可以使用if：

<div data-bind="foreach: empName">
    <div data-bind="if: name == 'Name1'">
        Department 1
    </div>
    <div data-bind="if: name == 'Name2'">
        Department 2
    </div>
</div>

如何在绑定中使用switch语句？

3 个答案: