Синтаксис бесконтейнерной привязки KnockoutJS
Потерпите секунду: KnockoutJS предлагает ультра-удобный вариант использования синтаксиса привязки без контейнера для его foreach
привязки, как описано в примечании 4 foreach
документации привязки.
http://knockoutjs.com/documentation/foreach-binding.html
Как показывает пример документации Knockout, вы можете написать свою привязку в KnockoutJS следующим образом:
<ul>
<li class="header">Header item</li>
<!-- ko foreach: myItems -->
<li>Item <span data-bind="text: $data"></span></li>
<!-- /ko -->
</ul>
Мне очень жаль, что AngularJS не предлагает такого синтаксиса.
Angular's ng-repeat-start
иng-repeat-end
В способе решения ng-repeat
проблем AngularJS образцы, с которыми я сталкиваюсь, относятся к типу jmagnusson, опубликованному в его (полезном) ответе.
<li ng-repeat-start="page in [1,2,3,4,5]"><a href="#">{{page}}</a></li>
<li ng-repeat-end></li>
Моя первоначальная мысль, увидев этот синтаксис, такова: действительно? Почему Angular заставляет всю эту дополнительную разметку, с которой я не хочу иметь ничего общего, и это намного проще в Knockout? Но затем комментарий hitautodestruct в ответе jmagnusson заставил меня задуматься: что создается с помощью ng-repeat-start и ng-repeat-end в отдельных тегах?
Более чистый способ использования ng-repeat-start
иng-repeat-end
После исследования утверждения hitautodestruct, добавление ng-repeat-end
в отдельный тег - это именно то, что я бы не хотел делать в большинстве случаев, потому что он генерирует совершенно бесполезные элементы: в данном случае <li>
элементы, в которых ничего нет. Разбитый на страницы список Bootstrap 3 стилизует элементы списка так, чтобы казалось, что вы не сгенерировали никаких лишних элементов, но когда вы проверяете сгенерированный html, они есть.
К счастью , вам не нужно много делать, чтобы получить более чистое решение и меньшее количество html: просто поместите ng-repeat-end
объявление в тот же тег html с расширениемng-repeat-start
.
<ul class="pagination">
<li>
<a href="#">«</a>
</li>
<li ng-repeat-start="page in [1,2,3,4,5]" ng-repeat-end><a href="#"></a></li>
<li>
<a href="#">»</a>
</li>
</ul>
Это дает 3 преимущества:
- меньше HTML-тегов для записи
- бесполезные, пустые теги не генерируются Angular
- когда массив для повторения пуст, тег с
ng-repeat
не будет сгенерирован, что дает вам то же преимущество, что бесконтейнерная привязка Knockout дает вам в этом отношении
Но есть еще более чистый способ
После дальнейшего изучения комментариев в github по этой проблеме для Angular, https://github.com/angular/angular.js/issues/1891 ,
вам не нужно использовать ng-repeat-start
и ng-repeat-end
для достижения тех же преимуществ. Вместо этого, снова разветвляя пример jmagnusson, мы можем просто пойти:
<ul class="pagination">
<li>
<a href="#">«</a>
</li>
<li ng-repeat="page in [1,2,3,4,5,6]"><a href="#">{{page}}</a></li>
<li>
<a href="#">»</a>
</li>
</ul>
Итак, когда использовать ng-repeat-start
и ng-repeat-end
? Согласно документации angular , чтобы
... повторить серию элементов вместо одного родительского элемента ...
Хватит говорить, покажи примеры!
Справедливо; Этот jsbin рассматривает пять примеров того, что происходит, когда вы используете и когда не используете один и ng-repeat-end
тот же тег.