innerText fails to address text content in some databinding circumstances

[dave]

The example attempts to set the innerText of a databound element. It fails in some circumstances:

http://jsfiddle.net/akYDS/5/

The example shows that when using textContent it works as expected.

[dave]

It should show "Success" 4 times. What we get is this:

[dfreedm]

The circumstances appear directly related to whitespace around the template mustachios.

[rafaelw]

Ok, so the issue here is that the case where you are using innerText is simply updating the value of the textNode which is sitting there, rather than throwing away the text node and creating a fresh new one (which is probably what you want).

The way MDV works, simply updating a value of an element, doesn't eject the binding. Using an element as an example:

div.setAttribute('foo', 'bar'); // <div foo=bar> var model = { foo: 'bat' }; div.bind('foo', model, 'foo'); // <div foo=bat> div.setAttribute('foo', 'baz'); // <div foo=baz> model.foo = 'boo'; // when the node is notified that it's bound value has changed, the value will be <div foo=boo>

In otherwords, if your intent is to through away DOM (and the bindings with it), you should do so explicitly. Possibly with node.innerHTML = ''; before you do anything else.

BTW, the difference in behavior between <div> {{ foo }} </div> and <div>{{ foo }}</div> is an artifact of how compound bindings in MDV work, and it doesn't matter much. The point is that, even in the later case, if you update the bound value of {{ foo }} to be "really fail!", the binding will overwrite "Success" (in the innerText case).

[arv]

Another thing to remember is that innerText is not supported by Firefox.