JsViews: элемент пользовательского интерфейса с неправильными значениями после наблюдаемого обновления

Question

JsViews - отличная библиотека. И я работал с ним некоторое время.

Но все же я не могу найти, почему, черт возьми, это событие не будет работать.

Данные после сортировки правильные, и обор хороший.

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); 
} 

Шаблон:

{^{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}} 

Спасибо!

Answer 1

Ah OK. То, что вы делаете, это сначала сортировка массива StructureActivitiesTiers, а затем изменение его значений незаметно, затем вызов $.observable(this.StructureActivitiesTiers).refresh(arr);.

Эффект refresh(arr) заключается в том, чтобы определить, действительно ли объекты в новом массиве, arr ссылаются на существующие объекты в массиве StructureActivitiesTiers. Если это так, он просто перетасует визуализированные представления, чтобы поместить их в правильном порядке и не будет повторно отображать каждый из них. Таким образом, игнорируемые изменения свойств игнорируются.

Вы можете это исправить, делая изменения свойств наблюдаемой тоже, либо до, либо после выполнения обновления вызова массива:

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); 

или:

$.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 
    }); 
} 

См https://jsfiddle.net/ertsu5qc/4/.

В качестве альтернативы вы можете заполнить arr новых объектов:

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); 

Теперь refresh(arr) вызова находит новые объекты, а не ссылки на существующие, так она удаляет старые представления для каждого элемента и вставляет новые для новинки, (что, очевидно, делает их полностью).

См. https://jsfiddle.net/ertsu5qc/5/.