In which cases we should use ‘virtual elements’ and ‘data-bind’ ?
For example, this code using virtual elements:
<div class="custom-configs">
<h2><!-- ko i18n: 'Custom Settings' --><!-- /ko --></h2>
<!-- ko foreach: { data: customSettings, as: 'customSetting' } -->
<div>
<!-- ko i18n: 'Setting' --><!-- /ko -->
<!-- ko text: $index() + 1 --><!-- /ko -->:
<!-- ko text: ko.toJSON(customSetting) --><!-- /ko -->:
</div>
<!-- /ko -->
and this code using ‘data-bind’ syntax:
<div class="custom-configs">
<h2 data-bind="i18n: 'Custom Settings'"></h2>
<div data-bind="foreach: { data: customSettings, as: 'customSetting' }">
<div>
<span data-bind="i18n: 'Setting'"></span>
<span data-bind="text: $index() + 1"></span>
<span data-bind="text: ko.toJSON(customSetting)"></span>
</div>
</div>
Why knockoutjs use 2 approaches if both of them do the same. Please, share with me any thoughts in which cases it should be used ‘virtual elements’ and ‘data-bind’ syntax.
P.S. I noticed one difference with virtual elements, in some cases it’s not create extra html element. Is this the only one difference between them?
