2

在淘汰模板绑定过程中，我需要检测何时处理每行中的第一个元素，因为它不应该有锚标记围绕它。

鉴于以下 js 用于淘汰赛...

function Model() {
    var self = this;
    self.gridData = ko.observableArray('{"GridData":[["Category foo","0","0"],["Category bar","0","0"]]}');
}

var model = new Model();
ko.applyBindings(model);

而这个模板...

<script type="text/html" id="template">
    <table>
        <tbody data-bind="foreach: gridData">
            <tr data-bind="foreach: $data">
                <td><a href="" data-bind="text: $data"></a></td>
            </tr>
        </tbody>
    </table>
</script>

而这个html...

<div data-bind="template: { name: 'template' }"></div>

如果我们正在处理第一个元素，是否可以以某种方式使用“if”绑定？

另外，我发现了这个SO Post，但它并没有让我得到我想要的东西。

更新：

感谢您的两个答案。使用每个提供的信息，我能够为我的情况找到一个好的解决方案。我将模板更新为以下...

<script type="text/html" id="template">
        <tbody data-bind="foreach: gridData">
            <tr data-bind="foreach: $data">
                <!-- ko if:($index()===0) -->
                <td data-bind="text: $data"></td>
                <!-- /ko -->
                <!-- ko ifnot:($index()===0) -->
                <td><a href="" data-bind="text: $data"></a></td>
                <!-- /ko -->
            </tr>
        </tbody>
</script>
4

2 回答 2

5

您可以简单地使用$index绑定上下文，它是一个可观察的，因此您需要调用它来获取它的值。

JS

var vm = {
    items: ['a', 'b', 'c', 'd', 'e', 'f']
};

ko.applyBindings(vm);

HTML

<div data-bind="foreach: items">
    <div data-bind="css: { first: $index() == 0 }">
        <span data-bind="text: $index"></span>
        :
        <span data-bind="text: $data"></span>
    </div>
</div>

小提琴：http: //jsfiddle.net/xixonia/v8Eh2/

Foreach 文档： http: //knockoutjs.com/documentation/foreach-binding.html

绑定上下文文档： http: //knockoutjs.com/documentation/binding-context.html

于 2013-04-16T17:19:38.460 回答
1

你试过这样的事情吗？

<script type="text/html" id="template">
        <table>
            <tbody data-bind="foreach: gridData">
            <tr data-bind="foreach: $data">

                <td>
                    <span data-bind="text:$data,visible: ($index() === 0) " ></span>

                    <a href="" data-bind="text: $data ,visible: ($index() >=1)"></a>
                </td>
            </tr>
            </tbody>
        </table>
    </script>

诀窍是“$index”的使用。我也建议你看看这里，你可以找到很多有用的特殊属性。

（另请注意，您需要使用淘汰赛 2.x+）

[更新] 对不起克里斯托弗哈里斯，我意识到他在我回答的时候发布了他的答案，当然，他的所有权利

于 2013-04-16T17:24:49.773 回答