Knockout "Span" tag binding issues

Question

I am new to Knockout and cannot solve this problem.

HTML:

<span data-bind="text: greetings" /> <input data-bind="value: firstname" /> <input data-bind="value: lastname" /> <span data-bind="text: greetings">Default 2</span>​ 

and the corresponding JS is

 <script type="text/javascript"> $(document).ready(function () { var dv = document.getElementById('divMain'); ko.applyBindings(new Vm()); }); function Vm() { this.greetings = ko.observable("hello world"); this.firstname = ko.observable("firstname"); this.lastname = ko.observable("lastname"); }; </script> 

( jsfiddle )

The problem is that the controls are not bound after the first span tag (hello).

But if I wrap the span tag inside some div , then the binding works for each control.

Is this normal behavior? Why is control outside the first range unrelated?

Greetings

Answer 1

And, only a few tags can be self-closing in html, if you submit your documents as MIME type application/xhtml+xml , this will probably work ... This question has good information. Inspect this and you can see that all spans are nested.

This works for me ...