javascript - Knockout.js 中的 $index 以显示字母而不是数字

Question

我想在 KnockoutJS 中使用 $index 来显示字母而不是数字。例如，

A.项目 1
B. 项目 2
C. 项目 3

我怎样才能做到这一点？？

Answer 1

如果适合您的需要，您可以使用olwith alist-style-type来执行此操作。upper-alpha例如：

HTML：

​<ol data-bind​​​​​​​​​​​="foreach: items" class="alpha">
    <li data-bind="text: $data"></li>
</ol>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS： ​​​</p>

.alpha {
    list-style-type: upper-alpha;
}​

JavaScript：

function ViewModel() {
    this.items = ko.observableArray([
        "Apples",
        "Oranges",
        "Bananas"
    ]);
}
var model = new ViewModel();

ko.applyBindings(model);​

示例：http: //jsfiddle.net/andrewwhitaker/CCNtR/1/

Answer 2

看看这个小提琴：http: //jsfiddle.net/jearles/RhmTb/19/

关键是编写一个视图模型方法来将索引转换为字母。

<div data-bind="foreach: names">
  <div>
    <span data-bind="text: $root.indexLetter($index())"></span>.
    <span data-bind="text: $data"></span>
  </div>      
</div>   

--

var viewModel = {
  names : ['one', 'two', 'three', 'four', 'five', 'six'],
  indexLetter : function(index) {
    return String.fromCharCode(65 + index);
  }
}

ko.applyBindings(viewModel);