Примените класс к каждому n-му элементу шаблона с помощью knockoutjs

Question

Я экспериментировал с knockoutjs , переделывая существующий проект.

Мой текущий макет имеет логику, чтобы определить, является ли отображаемый тег <div> первым или четвертым элементом.

if (index % 4 == 0) addClass('omega');
if (index % 4 == 1) addClass('alpha');

Существует ли какая-либо встроенная функция выбивки, которая может шаблонировать подобные условия?

Answer 1

Несколько вариантов для вас:

• есть работа по добавлению переменной $index при выполнении foreach в KO.Это планируется включить в КО 2.1.Запрос на получение здесь: https://github.com/SteveSanderson/knockout/pull/182

• здесь есть привязка repeat: https://github.com/mbest/knockout-repeat, которая дает вам лучший доступ к фактическому индексу.

• если вы используете observableArray, то существует простой способ создать индекс для каждого элемента.

Это будет выглядеть так:

//track an index on items in an observableArray
ko.observableArray.fn.indexed = function() {
   //whenever the array changes, make one loop to update the index on each
   this.subscribe(function(newValue) {
       if (newValue) {
           var item;
           for (var i = 0, j = newValue.length; i < j; i++) {
               item = newValue[i];
               if (!ko.isObservable(item.$index)) {
                  item.$index = ko.observable();
               }
               item.$index(i);      
           }
       }   
   }); 

   this.valueHasMutated(); 
   return this;
};

Вы должны инициализировать массив observableArray для индексации следующим образом:

this.myArray = ko.observableArray().indexed();

Теперь, когда манипулируют массивом observable, он будет проходить через элементы один раз и исправлять индекс.Это лучше, чем внутри вашего foreach поиска индекса каждого элемента каждый раз.