knockout.js - knockout.js 如何在处理函数中访问 $index

Question

据我了解，在绑定$index中可用foreach:，给出对象的索引...我有一个click:绑定，例如click:foo，我需要访问$indexinside foo。

有办法吗？

Answer 1

而不是通过绑定中的函数来破解它，您只需要获取绑定上下文。只要您有权访问与绑定关联的 DOM 元素，就可以使用该ko.contextFor()函数获取绑定上下文及其所有属性。

您在处理程序中获得的事件对象使您可以通过target属性访问节点。使用它来获取上下文。

var viewModel = {
    foo: function (data, event) {
        var context = ko.contextFor(event.target);
        // do stuff with context.$index()
    }
};

Answer 2

是的，

<input type="button" data-bind="click: function(data, event) { myClickHandler($index, data, event); }"/>

Answer 3

使用 ES6 代码更容易。在我的 html 中，我有一组页面

<span data-bind="foreach: pages">
     <a data-bind="click: $parent.gotoPage.bind($parent), text: $index()+1">
     </a>
</span>

在视图控制器类中，我有gotoPage方法。第一个参数将是foreach. 非常简单。

class ViewModel {
    constructor() {
        this.requestedPage = ko.observable(0);
        this.pages = ko.observableArray([0,1,2,3]);
    }

    async run() {
        this.message("Running");
    }

    gotoPage(pageRequested, event) {
        this.requestedPage(pageRequested);
        this.run();
    }
}