如何在计算的 observable [knockout.js] 中使用索引

Question

下面是一些示例代码。我需要在计算变量中使用项目索引，但如果不访问保存视图模型应用程序的变量，我无法弄清楚如何做到这一点。

<template type="text/ko-template" id="rowTemplate">
    <li><span data-bind="text: number"></span> = <span data-bind="text: word"></span></li>
</template>

<ul data-bind="template: { name: 'rowTemplate', foreach: rowArray }"></ul>

<script>

    function RowModel(word) {
        var self = this;
        self.word = ko.observable(word);
        self.number = ko.computed({
            read: function(){
                return "#" + app.rowArray.indexOf(self); // This works, but is far from ideal.
            },
            deferEvaluation: true
        });

    };

    function ViewModel() {
        var self = this;
        self.rowArray = ko.observableArray([
            new RowModel('Zero'),
            new RowModel('One'),
            new RowModel('Two'),
        ]);
    };

    var app = new ViewModel();
    ko.applyBindings(app);

</script>

我尝试将带有注释的行更改为许多内容，例如$index、self.index()，以及所有与$parentContext 类似的组合等。

Answer 1

您可以在视图中使用$index，而不是使用计算，它给出了数组的当前索引。

查看：

<template type="text/ko-template" id="rowTemplate">
    <li><span data-bind="text: '#'+($index()+1)"></span> = <span data-bind="text: word"></span></li>
</template>

<ul data-bind="template: { name: 'rowTemplate', foreach: rowArray }"></ul>

视图模型：

function RowModel(word) {
    var self = this;
    self.word = ko.observable(word);
};

function ViewModel() {
    var self = this;
    self.rowArray = ko.observableArray([
        new RowModel('Zero'),
        new RowModel('One'),
        new RowModel('Two'),
    ]);
};

var app = new ViewModel();
ko.applyBindings(app);

工作示例here

Answer 2

我发布这个问题是为了简化我真正的“问题”，这可能不是最好的主意。我的意图是访问计算出的 observable 中的上下文，因此我提到了$parentContext。

我的研究导致了以下关于“上下文”的堆栈溢出问题和答案：How can I use knockout's $parent/$root pseudovariables from inside a .computed() observable?

Knockout 确实提供了 some functions 用于获取上下文，但它们在这种情况下不起作用（它们仅在事件处理程序中有用）：

ko.dataFor(element) - 返回可用于绑定元素的数据 ko.contextFor(element) - 返回可用于 DOM 元素的整个绑定上下文。

因此，最好的解决方案似乎与我原来的问题非常相似，但它明确地将“上下文”存储在模型对象上，然后用于计算的 observable（如上述 S.O. 问题和答案中进一步讨论的）

function RowModel(word, context) {
    var self = this;
    self.word = ko.observable(word);
    self.context = context; // Save the 'context' to the object.
    self.number = ko.computed({
        read: function() {
            return "#" + self.context.rowArray.indexOf(self); // Do something with the 'context'.
        },
        deferEvaluation: true
    });
};

function ViewModel() {
    var self = this;
    self.rowArray = ko.observableArray([
        new RowModel('Zero', self),
        new RowModel('One', self),
        new RowModel('Two', self),
    ]);
};

这听起来有点麻烦，但似乎淘汰赛基本上是在“幕后”对compute $index做同样的事情：

与其他绑定上下文属性不同，$index 是一个可观察对象，并且会在项的索引更改时更新