Я постоянно использую эту идиому в шаблонах HTML на основе KO:
<!-- 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 -->
Есть ли лучший / более чистый способ делать условные выражения в KO, или есть лучший подход, чем просто использование традиционных конструкций if-else?
Кроме того, я просто хотел бы отметить, что некоторые версии Internet Explorer (IE 8/9) неправильно анализируют приведенный выше пример. Пожалуйста, посмотрите этот вопрос SO для получения дополнительной информации. Краткое резюме: не используйте комментарии (виртуальные привязки) внутри тегов таблиц для поддержки IE. Используйте tbody
вместо этого:
<tbody data-bind="if: display"><tr><td>hello</td></tr></tbody>
javascript
knockout.js
Дженсен Чинг
источник
источник
Ответы:
Есть несколько способов обработки этого типа кода.
с комбинацией if / ifnot, как сейчас. Это отлично работает и не слишком многословно.
Связывание переключателя / регистра Майкла Беста ( https://github.com/mbest/knockout-switch-case ) довольно гибкое и может позволить вам легко справиться с этим и более сложными (больше состояний, чем true / false).
Другой вариант - использовать динамические шаблоны. Вы должны привязать область к одному или нескольким шаблонам с использованием имени шаблона на основе наблюдаемого. Вот сообщение, которое я написал на эту тему некоторое время назад: http://www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html . В вашем сценарии это может выглядеть так:
getCellTemplate
Функция может жить там , где, но будет дан элемент ($ данных) в качестве первого аргумента , и возвратит имя шаблона для использования.источник
propertyName
, вы можете динамически определять имя шаблона.Один из подходов - использовать именованные шаблоны (которые могут поддерживать передачу аргументов):
Другой вариант - использовать мой плагин switch / case , который будет работать следующим образом:
источник
Чтобы избежать пересчета привязки нокаута при использовании комбинации if: / ifnot:, вы можете использовать их вместе с конструкцией with:
источник
Теперь есть также
knockout-else
привязка / плагин (который я написал для решения этой проблемы).источник