使用knockout.js,我需要在我的模板中使用'count'

Nin*_*oel 10 knockout.js

基本上,我想用'行号''标记'我的模板生成的每一行

例如.

1 [other html]
2 [other html]
3 [other html]
Run Code Online (Sandbox Code Playgroud)

以前,当一个对象添加到数组(模板使用的数组)时,我会计算数组项,然后将该计数添加到我添加到数组的新对象中...

但是,现在我需要删除,它在删除时产生类似的东西:

1 [other html]
3 [other html]
Run Code Online (Sandbox Code Playgroud)

'2'已被删除,但我真的希望它只标记行号而不是行内数据的id.所以'3'应该消失,'2'应该是最后一项,即使'2'是那个.

chr*_*vdp 13

淘汰2.1(也许之前)你可以做到

<span data-bind="text: $index"></span>
Run Code Online (Sandbox Code Playgroud)

代替

<span data-bind="text: ko.utils.arrayIndexOf($parent, $data)"></span>
Run Code Online (Sandbox Code Playgroud)

更新小提琴 - http://jsfiddle.net/u9GWr/140/


Art*_*tem 9

从淘汰版本2.1开始使用$ index变量而不是arrayIndexOf方法(例如,请参阅此答案).


我会使用和$ parent为此,例如http://jsfiddle.net/u9GWr/139/

HTML:

<ul data-bind="with: vm.items">
    <!-- ko foreach: $data -->
    <li><span data-bind="text: ko.utils.arrayIndexOf($parent, $data)"></span>
        <span data-bind="text: name"></span>
    </li>
    <!-- /ko -->
</ul>
Run Code Online (Sandbox Code Playgroud)

JavaScript的

vm = {
    items: ko.observableArray( [
        {name: ko.observable("a")},
        {name: ko.observable("b")},
        {name: ko.observable("c")},
    ])
}

ko.applyBindings(vm);

vm.items.splice(2,0, { name: ko.observable('test')});
?
Run Code Online (Sandbox Code Playgroud)

产量

0 a

1 b

2测试

3 c