在淘汰模板绑定过程中,我需要检测我何时处理每一行中的第一个元素,因为它不应该有围绕它的锚标记。
给出以下js for knockout ......
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>
答案 0 :(得分: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
答案 1 :(得分: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”。 我还建议你看看here,你会发现很多有用的特殊属性。
(另请注意,您需要使用knockout 2.x +)
[更新]对不起克里斯托弗·哈里斯,我意识到他在回答时发布了他的答案,当然还有对他的所有权利