Question

下面是一些示例代码。我需要在计算变量中使用项索引，但是我无法在不访问持有视图模型应用程序的变量的情况下弄清楚如何操作。

$(document).ready(function() {   
  $(".imagesbw").mouseover(function(){
  $(".imagesbw").hide();



  })
    $(".imagescol").mouseout(function(){
  $(".imagesbw").show();
});
})

我尝试将注释中的行更改为很多内容，例如<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()类似的组合等。

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元素可用的整个绑定上下文。

因此，似乎最好的解决方案与我原来的问题非常相似，但它明确地将'context'存储在模型对象上，然后在计算的observable中使用（如上述SO问题和答案中进一步讨论的那样）

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是一个可观察的，只要项目的索引发生变化就会更新

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

2 个答案: