使用每个项目在KnockoutJS中创建编号列表's在可观测数组中的位置

Create numbered list in KnockoutJS using each item's position in an observable array for the numbers

本文关键字:位置 可观 数组 编号 项目 KnockoutJS 创建 列表      更新时间:2023-09-26

我想创建一个编号列表,并使用knockout来绑定数据。数据绑定工作得很好,但我无法想出一种方法来根据数字在可观察阵列中的位置平滑地生成数字。可观察的数组将来可能会有所不同,所以我希望通过knocket来动态处理列表的编号。

这是我的html:

<ul class="nav nav-list" data-bind="foreach: sidebarItems">
    <li class="" data-bind="css: isActive">
        <a href="#dropdowns" data-bind="text: text"></a>
    </li>
</ul>

这是我的Javascript代码:

self.sidebarItems = ko.observable([
    {text: 'Option'}, 
    {text: 'Option'}, 
    {text: 'Option'}, 
    {text: 'Option'}, 
    {text: 'Option'}
]);

我希望列表显示:
1-选项
2-选项
3-选项
等等

请参阅文档:http://knockoutjs.com/documentation/foreach-binding.html

使用$index:

<ul class="nav nav-list" data-bind="foreach: sidebarItems">
    <li class="" data-bind="css: isActive">
        <a href="#dropdowns" data-bind="text: $index() + text()"></a>
    </li>
</ul>

2个选项。

  1. 将您的ul更改为ol
  2. 使用敲除$index变量(如前臂中的text:$index