databinding not working with input type="number"

[ainglese]

if you look at this jsfiddle https://jsfiddle.net/r5nwnb61/, the linked property is not updated when using the input type number when using the arrows provided by the browser (on chrome at least). if you type with the keyboard the databinding works..

[ainglese]

according to this http://stackoverflow.com/questions/4060782/event-to-detect-change-of-an-html5-number-control-in-webkit-chrome this is not a bug in chrome, but instead the "input" event should be used to catch that events..

[coddwrench]

@ainglese, you can fix it this way:

$("input[type='number']").on("change", function () {
    $.observable($.view(this).data).setProperty("selectedValue", $(this).val());
});

example

[ainglese]

thank you @coddwrench but we have a very complex model with dynamic templating / data-binding, so the solution is not so easy for us. We surely can manage to get a workaround, but i'm just wondering if this is by design in jsviews or if it is a bug.

but thank you very much for taking the time to answer!

[eugene-panferov]

but we have a very complex model with dynamic templating

"dynamic templating" doesn't it sound to you like a contradiction in terms?

i bet you have to seriously review your "complex model"

[ainglese]

Maybe my english is not so good when I write “dynamic templating”

Template is selected by “field type” (user-configurable) and data-binding to the correct property is made via a “proxy pattern”; Imagine something like a dynamic form, datagrid etc. so user can select if a field has to be view as a checkbox or as a textbox. We are managing business data that has to be acquired by external systems and thus ui need to be customized for each customer.

But this was just to say that before handling that inside our code, I want to understand if it is a bug in jsview or if it is by design. I’m not saying I cannot apply the suggested workaround “because I have a complex model”.

[BorisMoore]

This is not supported right now - obviously it is HTML5 and only partially implemented/supported in browsers. So formally, JsViews does not yet support it. However I will probably add some support in the next update, based on the following code. You can already try it out:

function $link(tmplOrLinkExpr, to, from, context, noIteration, parentView, prevNode, nextNode) {
  ...
  if (!activeBody) {
    activeBody = document.body;
    $(activeBody)
      .on(elementChangeStr, onElemChange)
      .on('input', 'input[type="number"]', onElemChange)
      .on('blur', '[contenteditable]', onElemChange);
  }

function $unlink(to) {
  ...
  $(activeBody)
    .off(elementChangeStr, onElemChange)
    .off('input', 'input[type="number"]', onElemChange)
    .off('blur', '[contenteditable]', onElemChange);
  activeBody = undefined;

function onElemChange(ev) {
  ...
  if (!source._jsvTr || ev.delegateTarget !== activeBody && ev.target.type !== "number" || ev.type === "input") {

[ainglese]

thank you @BorisMoore it works

[BorisMoore]

Support for input type="number" has been added in commit 86.