[0.6] textarea value bindings only work on stringInsert and stringRemove events

[eleung]

This seems to be because the binding is a NodeBinding inside the textarea.

stringInsert and stringRemove textarea changes work because they directly set the .value property of a textarea.

On full value changes (instead of just stringInsert/stringRemove) the textarea's child node is indeed updated, but it is not reflected on the page as only directly setting .value of a textarea works.

[eleung]

I have implemented a fix here: derbyjs/saddle#11

Not sure if it's the desired way to implement the fix, but my fix helps to show the issue as well.

[nateps]

Bindings are implemented in Derby and not saddle. Was a bit more to this change also, since it needed OT of selection state as well.

Fixed in: 89fcd2c

[minicuper]

Still buggy (alpha-8). If someone updates model directy, textarea doesn't update it's value:
for example I have such a view:

  <textarea>{{_page.textarea}}</textarea>
  <br/>
  <input value="{{_page.textarea}}">
  <br/><br/>
  {{_page.textarea}}
  <br/><br/>
  <a on-click="model.set('_page.textarea', 'direct through model')">
    model.set('_page.textarea', 'direct through model')
  </a>

Textarea binding works perfect when I type in the textarea or in the input (all 3 items update correct) but when I click at the ref I get something like this:

I see old value in the textarea-block at the page BUT I see also updated text-element inside textarea in html (in chrome dev tools). Browser (crome and firefox) don't copy text-element content into the textarea.value.

All the behavior is because of erron in the textUpdate function in Page.js
If someone types through input or textarea - textDiff.onStringInsert and textDiff.onStringRemove work. The functions change textarea.value. But if someone change textarea model then binding.template.update works and the function changes data of internal text-element.

function textUpdate(binding, element, pass) {
  if (pass) {
    if (pass.$event && pass.$event.target === element) {
      return;
    } else if (pass.$type === 'stringInsert') {
      return textDiff.onStringInsert(element, pass.previous, pass.index, pass.text);
    } else if (pass.$type === 'stringRemove') {
      return textDiff.onStringRemove(element, pass.previous, pass.index, pass.howMany);
    }
  }
  binding.template.update(binding.context, binding);
}

So I suggest a workaround - to change value directly for textarea:

  if (element.tagName === "TEXTAREA") {
    var template = binding.template;
    var value = template.expression.get(binding.context);
    return element.value = template.stringify(value);
  }

  binding.template.update(binding.context, binding);