Formatting a number in data-link ? about jsviews HOT 2 CLOSED

I think the best approach would be to use converters, in order, first, to convert from the number data type of your underlying data (next_bid) to the string data type displayed/returned by in an <input>, and back to number when the input is updated.

You can then choose to have the converter from number to string also format to 2 decimal places, etc etc,

$.views.converters({
  dec: function(value) {
    return value.toFixed(2); // return number as string formatted to 2 decimal places
  },
  toNum: function(val) {
    return +val; // Convert string to number
  }
});

<input data-link="{:next_bid:toNum}"/><br/><br/>
<input data-link="{dec:next_bid:toNum}"/><br/><br/>
<a data-link="next_bid">Bid</a>

<input data-link="next_bid.toFixed(2)"/> won't work because by default data-link will bind to the leaf item in the data path, in this case the 'computed' toFixed(2), (see https://www.jsviews.com/#linked-paths@deep), whereas you want to bind to next_bid.

You could specify the two-way binding to next_bid by writing <input data-link="next_bid^toFixed(2) linkTo=next_bid"/>, but even there, you still need to convert to number, and therefore to write <input data-link="{:next_bid^toFixed(2) linkTo=next_bid:toNum}"/>, so you might as well use the simpler approach above of doing everything in the dec and toNum converters...

Let me know if this works for you...

from jsviews.

Resolving as a question (not a bug)

from jsviews.