Closing tags

Details
Written by: Stanko Milosev
Category: Knockout
Hits: 3513

It seems that knockout doesn't like HTML without closing tags. Code like:

<div data-bind="foreach: Cars">

	<!-- car value has to exist and has to be under quotes, otherwise it doesn't work -->
	<select autowidth="true" data-bind="
		options: $root.carTypes
		,optionsValue: 'carValue'
	"/>
	<br>test</br>

</div>

Will produce something like (notice that "test" is inside select tag):

<select autowidth="true" data-bind="
				options: $root.carTypes
				,optionsValue: 'carValue'
			"><option value="BMW">BMW</option><option value="Ferrari">Ferrari</option><option value="Fiat">Fiat</option><option value="Ford">Ford</option><option value="Mercedes-Benz">Mercedes-Benz</option>
			test

		

	

</select>

Code like:

<div data-bind="foreach: Cars">

	<!-- car value has to exist and has to be under quotes, otherwise it doesn't work -->
	<select autowidth="true" data-bind="
		options: $root.carTypes
		,optionsValue: 'carValue'
	"></select>
	<br></br>

</div>

Will produce something like:

<div data-bind="foreach: Cars">

	<!-- car value has to exist and has to be under quotes, otherwise it doesn't work -->
	<select autowidth="true" data-bind="
		options: $root.carTypes
		,optionsValue: 'carValue'
	"><option value="BMW">BMW</option><option value="Ferrari">Ferrari</option><option value="Fiat">Fiat</option><option value="Ford">Ford</option><option value="Mercedes-Benz">Mercedes-Benz</option></select>
	<br><br>

</div>

Notice <br> tag two times

 

Finally code (notice that br is without closing tag):

<div data-bind="foreach: Cars">

	<!-- car value has to exist and has to be under quotes, otherwise it doesn't work -->
	<select autowidth="true" data-bind="
		options: $root.carTypes
		,optionsValue: 'carValue'
	"></select>
	<br/>

</div>

Will work as expected