JsViews: UI element with wrong values after observable refresh

Question

JsViews is a great library. And i have been working with it for some time now.

But still i can't find why the hell this event call won't work.

The data after the sorting is right and the arr is good.

sortTiers: function () {
var arr = this.StructureActivitiesTiers.slice()
          .sort(function (a, b) { return parseFloat(a.TierTo) - parseFloat(b.TierTo); });
            for (var i = 0; i < arr.length; i++) {
                arr[i].TierTo = parseFloat(arr[i].TierTo);
                arr[i].TierFrom = (i == 0 ? 0 : arr[i - 1].TierTo)
            }
            $.observable(this.StructureActivitiesTiers).refresh(arr);
}

The template:

{^{for StructureActivities}}
<tr>
 <td><input type="text" data-link="Currency"></td>
 <td><input type="text" data-link="Price"></td>
</tr>
{^{for StructureActivitiesTiers}}
<tr>
<td></td>
  <td>From: <input disabled data-link="TierFrom" type="text">&emsp;&emsp;
    To: <input type="text" data-link="TierTo">
  </td>
</tr>
{{/for}}
<tr>
<td>
  <button data-link="{on 'click' ~sortTiers}"/>
</td>
<td> 
</td>
</tr>
{{/for}}

Thanks!

BorisMoore BorisMoore · Accepted Answer · 2016-11-09T22:18:24

Ah OK. What you are doing is first sorting the StructureActivitiesTiers array, then modifying its values non-observably, then calling $.observable(this.StructureActivitiesTiers).refresh(arr);.

The effect of the refresh(arr) is to first determine if the objects in the new array, arr actually reference existing objects in StructureActivitiesTiers array. If so it will simply shuffle the rendered views to put them in the right order, and will not re-render each of them. So the non-observable property changes are ignored.

You can fix it by making the property changes observable too, either before or after doing the array refresh call:

for (var i = 0; i < arr.length; i++) {
  $.observable(arr[i]).setProperty({
    TierTo: parseFloat(arr[i].TierTo),
    TierFrom: i == 0 ? 0 : arr[i - 1].TierTo
  });
}
$.observable(this.StructureActivitiesTiers).refresh(arr);

or:

$.observable(this.StructureActivitiesTiers).refresh(arr);
for (var i = 0; i < arr.length; i++) {
  $.observable(arr[i]).setProperty({
    TierTo: parseFloat(arr[i].TierTo),
    TierFrom: i == 0 ? 0 : arr[i - 1].TierTo
  });
}

See https://jsfiddle.net/ertsu5qc/4/.

Alternatively you can fill the arr with new objects:

for (var i = 0; i < arr.length; i++) {
  arr[i] = {
    TierTo: parseFloat(arr[i].TierTo),
    TierFrom: i == 0 ? 0 : arr[i - 1].TierTo
  };
}
$.observable(this.StructureActivitiesTiers).refresh(arr);

Now the refresh(arr) call finds new objects, not references to existing ones, so it removes the old views for each item and inserts new ones for the new items, (so obviously renders them fully).

See https://jsfiddle.net/ertsu5qc/5/.

JsViews: UI element with wrong values after observable refresh

1 Answers