Collapsibles mit jQuery und knockout.js

Deutsch	English
Wer mit jQuery UI bzw. jQuery Mobile und Collapsibles arbeitet, kann sich das Layout seiner Seite gehörig zerschießen, wenn er den Titel des Collapsibles via knockout.js bindet. Der Unterschied ist klein, aber delikat:	When working with jQuery UI or jQuery Mobile and using Collapsibles, you can mess up your layout by binding the heading of the Collapsible via knockout.js. The difference between good and bad is both small and important:

Falsch/Bad	Gut/Good
<div data-role="collapsible">   <h3 data-bind="text: property"></h3>   <p>...</p> </div>	<div data-role="collapsible">   <h3>     <span data-bind="text: property"></span>   </h3>   <p>...</p> </div>

Erklärung	Details
Mit dem text-Binding von knockout.js wird der gesamte Markup innerhalb des h3 Elements auf den gebundenen Wert gesetzt. Dabei würde der jQuery UI/Mobile Markup des Collapsibles überschrieben, sobald der gebundene Wert sich ändert.  Im span-Element richtet das Binding hingegen keinen Schaden an.	The text-binding of knockout.js will set all markup code within the h3 element to the bound value. This would destroy jQuery UI/Mobile markup of the Collapsible as soon as the bound value changes. Anyway, the binding will not cause any problems inside of the nested span element.