Как использовать индекс в вычисленных наблюдаемых [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

Я отвечал на этот вопрос, как упрощение моего истинного 'проблема', которая возможно, не было Лучшая идея. Мое намерение состояло в том, чтобы получить доступ к контексту в вычисленном наблюдаемом, таким образом, мое упоминание о $parentContext.

Мои исследования приводят к следующему перелива вопросу стека и ответы, касающиеся «контекста»: How can I use knockout's $parent/$root pseudovariables from inside a .computed() observable?

Нокаут действительно обеспечивает some functions для получения контекста, но они не работают в этом сценарии (они полезны только обработчики событий):

ko.dataFor (элемент) - возвращает данные, которые были доступны для связывания с элементом ko.contextFor (элемент) - возвращает весь обязательный контекст, который был доступен к элементу DOM.

Таким образом, кажется, что лучшим решением будет очень похож на мой оригинальный вопрос, но он явно хранит «контекст» на модели объекта, чтобы затем использовать в вычисленный наблюдаемым (как описано далее в вышеупомянутых 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:

в отличии от других обязательного контекста свойства, $ индекс является наблюдаемым и обновляются каждый раз, когда индекс элемента изменяется

Answer 2

Вместо использования вычислен вы можете пойти с $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> 

ViewModel:

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