Składnia wiązania bez kontenera KnockoutJS
Proszę o chwilę cierpliwości: KnockoutJS oferuje bardzo wygodną opcję użycia bezkontenerowej składni wiązania do foreach
powiązania, jak omówiono w uwadze 4 foreach
dokumentacji powiązań.
http://knockoutjs.com/documentation/foreach-binding.html
Jak pokazuje przykład dokumentacji Knockout, możesz napisać swoje powiązanie w KnockoutJS w następujący sposób:
<ul>
<li class="header">Header item</li>
<!-- ko foreach: myItems -->
<li>Item <span data-bind="text: $data"></span></li>
<!-- /ko -->
</ul>
Myślę, że to raczej niefortunne, że AngularJS nie oferuje tego typu składni.
Angular ng-repeat-start
ing-repeat-end
W sposobie rozwiązywania ng-repeat
problemów przez AngularJS , próbki, które napotykam, są typu jmagnusson zamieszczonego w jego (pomocnej) odpowiedzi.
<li ng-repeat-start="page in [1,2,3,4,5]"><a href="#">{{page}}</a></li>
<li ng-repeat-end></li>
Moja pierwotna myśl po zobaczeniu tej składni brzmi: naprawdę? Dlaczego Angular wymusza te wszystkie dodatkowe znaczniki, z którymi nie chcę mieć nic wspólnego, a to jest o wiele łatwiejsze w Knockout? Ale potem komentarz hitautodestruct w odpowiedzi jmagnusson zaczął mnie zastanawiać: co jest generowane przez ng-repeat-start i ng-repeat-end w oddzielnych tagach?
Czystszy sposób używania ng-repeat-start
ing-repeat-end
Po zbadaniu twierdzenia hitautodestruct dodanie ng-repeat-end
do oddzielnego tagu jest dokładnie tym, czego nie chciałbym robić w większości przypadków, ponieważ generuje całkowicie bezużyteczne elementy: w tym przypadku <li>
elementy, w których nic nie ma. Lista podzielona na strony w Bootstrap 3 stylizuje elementy listy w taki sposób, że wygląda na to, że nie wygenerowałeś żadnych zbędnych elementów, ale kiedy sprawdzasz wygenerowany kod HTML, są one tam.
Na szczęście nie trzeba wiele robić, aby mieć czystsze rozwiązanie i mniejszą ilość html: wystarczy umieścić ng-repeat-end
deklarację na tym samym tagu html, który ma rozszerzenieng-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>
Daje to 3 korzyści:
- mniej tagów HTML do napisania
- bezużyteczne, puste tagi nie są generowane przez Angular
- gdy tablica do powtórzenia jest pusta, tag z
ng-repeat
nie zostanie wygenerowany, co daje taką samą korzyść, jaką daje w tym przypadku bezkontenerowe wiązanie Knockouta
Ale jest jeszcze czystszy sposób
Po dokładniejszym przejrzeniu komentarzy na githubie dotyczących tego problemu dla Angular, https://github.com/angular/angular.js/issues/1891 ,
nie musisz używać ng-repeat-start
i ng-repeat-end
osiągać tych samych korzyści. Zamiast tego, ponownie rozwidlając przykład jmagnusson, możemy po prostu:
<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>
Kiedy więc używać ng-repeat-start
i ng-repeat-end
? Zgodnie z dokumentacją kątową , do
... powtórz serię elementów zamiast tylko jednego elementu nadrzędnego ...
Dość gadania, pokaż kilka przykładów!
Słusznie; ten plik jsbin omawia pięć przykładów tego, co się dzieje, gdy to robisz, a kiedy nie używasz ng-repeat-end
tego samego tagu.