У меня есть шаблон KnockoutJS, который выглядит примерно так:
<div data-bind="template: {name: 'testTemplate', data: people}"></div>
<script id="testTemplate" type="text/html">
<!--ko foreach: $data-->
<div class="items" data-bind="text: full() + ' updated at: ' + Date()"></div>
<!--/ko-->
</script>
После запуска N-го количества тестов я понял, что создание такого шаблона ошибочно, поскольку KnockoutJS будет обновлять шаблон каждый раз, даже если данные не меняются.
Я проиллюстрировал это, используя эти две скрипки:
- используя привязку foreach (работает правильно)
- использование привязки данных (ужасный сбой)
Как вы можете видеть, если вы нажмете кнопку начальной загрузки или загрузите обновленные кнопки данных в привязке foreach, пользовательский интерфейс никогда не будет повторно отображаться, если данные фактически не изменятся. К сожалению, если вы делаете то же самое для привязки стиля данных, он каждый раз перерисовывается.
Я действительно не могу понять, в чем разница. У меня сложилось впечатление, что привязка данных работает так же, как foreach, но позволяет больше контролировать объект внутри шаблона.
Единственная причина, по которой я его использую, заключается в том, что у меня есть набор вложенных шаблонов, и мне нужно было приблизиться к реальному объекту. Я должен иметь возможность провести рефакторинг и уйти от этого подхода, но я все еще не понимаю, почему это проблема.
Разве <!--ko foreach:-->
не должен соблюдать тот же шаблон, что и привязка шаблона foreach?