Шаблонный Knockout.js - "пропустить" цикл?

Question

Итак, вот моя проблема, у меня есть дизайн страницы, который, по идее, представляет собой сетку 3 x 3, подобную этой ...

X X X
X X X 
X X X

Где каждый X - миниатюра.Пока нет проблем для нокаута!За исключением того, что сетка ДЕЙСТВИТЕЛЬНО выглядит следующим образом ....

* X X
X * * 
X * X

Где * - это пустое пространство (пустое изображение заполнителя).Шаблон никогда не изменится.Вопрос в том, как я могу добавить некоторые смарты в шаблон Knockout (нативный или в сочетании с шаблонами JQuery), который «пропустит» итерацию, но не поглотит данные, предназначенные для этого пространства?

Кен

Answer 1

Поскольку дизайн никогда не меняется, это должен быть шаблон. Не тратьте циклы ЦП на foreach и постарайтесь нащупать отверстия в процессе работы. Я бы связал каждый из 9 заполнителей с отдельной частью вашей модели представления. Затем просто заполните viewModel так, как вы хотите его показать.

У вас есть несколько вариантов:

• Ваша viewModel имеет 9 свойств, каждое из которых установлено на объект, который вы хотите отобразить в местах 1 - 9. Затем свяжите каждое из них. <div id="thirdItem" data-bind="with:item3"></div>
• создать массив в вашей viewModel, который всегда имеет 9 элементов. Возьмите ваш запрос из менее чем 9 элементов, разделите и вытолкните массив из 9 элементов, чтобы разместить ваши элементы повсюду. <div id="thirdItem" data-bind="with:items()[2]"></div>

Если вы можете управлять расположением в вашей БД, просто выплюните в набор строк, где вы хотите, чтобы ваши пробелы. Обработайте строку с истинным столбцом isEmpty в шаблоне по-разному.

проверь эту скрипку, чтобы увидеть действительно плохой и грязный пример Вы должны будете использовать свое воображение при моделировании. http://jsfiddle.net/DSbtk/2/

Answer 2

В конце концов, я пошел совершенно другим путем. Я использовал зацикленный шаблон для создания UL, состоящего из 5 элементов, а затем позволил jquerys «масону» складывать их для меня в «сетку». В шаблоне я добавил класс к каждому элементу с его индексом цикла и использовал CSS для определения левого и правого полей, достаточных для заполнения требуемого интервала.

Ken

Answer 3

Есть ли у вашей модели атрибут для каждого эскиза? Просто добавьте путь к графике по умолчанию к этому атрибуту для тех пространств, где должны быть заполнители.

Если вы покажете еще немного своего кода, вы, вероятно, получите лучший ответ:)