Jak szablonować struktury If-Else w widokach związanych z danymi?

Question

ja ciągle znajduję się przy użyciu tego idiomu w szablonach HTML KO-oparta:

<!-- ko if: isEdit --> 
<td><input type="text" name="email" data-bind="value: email" /></td> 
<!-- /ko --> 
<!-- ko ifnot: isEdit --> 
<td data-bind="text: email"></td> 
<!-- /ko --> 

tam jest lepiej/czystsze sposób zrobić warunkowe w KO, czy istnieje lepszy podejście niż tylko za pomocą tradycyjnych jeśli-else konstruuje?

Chciałbym również zwrócić uwagę, że niektóre wersje Internet Explorera (IE 8/9) nie parsują powyższego przykładu poprawnie. Aby uzyskać więcej informacji, patrz this SO question. Krótkie podsumowanie to: nie używaj komentarzy (wiązań wirtualnych) wewnątrz znaczników tabeli do obsługi IE. Użyj tbody Zamiast:

<tbody data-bind="if: display"><tr><td>hello</td></tr></tbody> 

Answer 1

Istnieje kilka różnych sposobów obsługi tego typu kodu.

• z kombinacją if/ifnot, taką jaka jest teraz. Działa to dobrze i nie jest strasznie gadatliwa.

• Wiązanie Michaela Besta/obudowy (https://github.com/mbest/knockout-switch-case) jest dość elastyczne i może pozwolić ci z łatwością poradzić sobie z tymi i bardziej skomplikowanymi (więcej stanów niż prawda/fałsz).

• Inną opcją jest użycie szablonów dynamicznych. Wiążesz obszar z jednym lub większą liczbą szablonów, używając nazwy szablonu opartej na obserwowalnym. Oto post, który napisałem na ten temat jakiś czas temu: http://www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html. W swoim scenariuszu może to wyglądać tak:

<td data-bind="template: $root.getCellTemplate"></td> 

<script id="cellEditTmpl" type="text/html"> 
    <input type="text" name="email" data-bind="value: email" /> 
</script> 

<script id="cellTmpl" type="text/html"> 
    <span data-bind="text: email"></span> 
</script> 

Funkcja getCellTemplate może żyć wszędzie, ale byłby określony element ($ dane) jako pierwszy argument i zwróci nazwę szablonu, aby wykorzystać .

Answer 2

Jedno podejście jest użycie nazwach szablonów (które może obsługiwać przekazywanie argumentów):

<!-- ko template: isEdit() ? 'emailEdit' : 'emailDisplay' --><!-- /ko --> 
<script id="emailEdit" type="text/html"> 
    <td><input type="text" name="email" data-bind="value: email" /></td> 
</script> 
<script id="emailDisplay" type="text/html"> 
    <td data-bind="text: email"></td> 
</script> 

Inną opcją jest używać switch/case plugin, która będzie działać tak:

<!-- ko switch --> 
    <!-- ko case: isEdit --> 
     <td><input type="text" name="email" data-bind="value: email" /></td> 
    <!-- /ko --> 
    <!-- ko case: $else --> 
     <td data-bind="text: email"></td> 
    <!-- /ko --> 
<!-- /ko --> 

Answer 3

Aby uniknąć ponownego obliczenia nokaut wiązania przy użyciu kombinacji jeżeli:/ifnot: można ich używać w połączeniu z „z:” Budowa

<!-- ko with: $data.DoSomePerformanceCriticalWork($data.SomeParameter()) --> 
     <!-- ko if: $data.Condition() --> 
      ... some markup ... 
     <!-- /ko --> 
     <!-- ko ifnot: $data.Condition() --> 
      ... some markup ... 
     <!-- /ko --> 
    <!-- /ko --> 

Answer 4

Jest teraz również wiązania/plugin knockout-else (czyli ja napisał, aby rozwiązać ten problem).