foreach 循环中的 KnockoutJS if 语句答案

【问题标题】：KnockoutJS if statement inside foreach loopforeach 循环中的 KnockoutJS if 语句
【发布时间】：2012-02-07 22:42:36
【问题描述】：

这里有这段代码：

<tbody data-bind="foreach: entries">
    <tr>
        <td><i class="icon-file"></i> <a href="#" data-bind="text: name, click: $parent.goToPath"></a></td>
        </tr>
</tbody>

我想要这样的东西（它是伪代码）：

<tbody data-bind="foreach: entries">
    <tr>
        <td><i class="{{ if type == 'file' }} icon-file {{/if}}{{else}} icon-folder {{/else}}"></i> <a href="#" data-bind="text: name, click: {{ if type == 'file' }} $parent.showFile {{/if}}{{else}} $parent.goToPath {{/else}}"></a></td>
    </tr>
</tbody>

可以在 KnockoutJS 上写这样的东西吗？

【问题讨论】：

标签： knockout.js

【解决方案1】：

一种选择是执行以下操作：

<tbody data-bind="foreach: entries">
    <tr>
        <td>
            <!-- ko if: type === 'file' -->
                <i class="icon-file"></i>
                <a href="#" data-bind="text: name, click: $parent.showFile"></a>
            <!-- /ko -->
            <!-- ko if: type !== 'file' -->
                <i class="icon-folder"></i>
                <a href="#" data-bind="text: name, click: $parent.goToPath"></a>
            <!-- /ko -->
        </td>
    </tr>
</tbody>

示例：http://jsfiddle.net/rniemeyer/9DHHh/

否则，您可以通过将一些逻辑移动到视图模型中来简化视图，例如：

<tbody data-bind="foreach: entries">
    <tr>
        <td>
            <i data-bind="attr: { 'class': $parent.getClass($data) }"></i>
            <a href="#" data-bind="text: name, click: $parent.getHandler($data)"></a>
        </td>
    </tr>
</tbody>

然后，在视图模型上添加方法以返回适当的值：

var ViewModel = function() {
    var self = this;
    this.entries = [
        { name: "one", type: 'file' },
        { name: "two", type: 'folder' },
        { name: "three", type: 'file'}
    ];

    this.getHandler = function(entry) {
        console.log(entry);
        return entry.type === 'file' ? self.showFile : self.goToPath;
    };

    this.getClass = function(entry) {
        return entry.type === 'file' ? 'icon-file' : 'icon-filder'; 
    };

    this.showFile = function(file) {
        alert("show file: " + file.name);
    };

    this.goToPath = function(path) {
        alert("go to path: " + path.name);
    };
};

示例：http://jsfiddle.net/rniemeyer/9DHHh/1/

【讨论】：

pastie.org/3334757 这是我的代码，基于您的示例。但它对我不起作用——它会生成没有内容的 TD。我用的是 knockout-2.0.0.js
你能叉出这个吗？ jsfiddle.net/rniemeyer/9DHHh。我从您的粘贴链接中没有发现任何问题。
它在没有条件的情况下运行良好 - 它呈现一个没有问题的表格，但是条件它不起作用。
原始小提琴是否适合您？你用的是什么浏览器？

【解决方案2】：

您可以使用基于注释标签的无容器控制流语法：

<tbody data-bind="foreach: entries">
    <tr>
        <!-- ko if: type === "file" -->
            <td><i class="icon-file"></i> <a href="#" data-bind="text: name, click: $parent.showFile"></a></td>
        <!-- /ko -->
        <!-- ko if: type !== "file" -->
            <td><i class="icon-folder"></i> <a href="#" data-bind="text: name, click: $parent.goToPath"></a></td>
        <!-- /ko -->
    </tr>
</tbody>

【讨论】：