JsViews: UI-Element mit falschen Werten nach beobachtbarer Aktualisierung

Question

JsViews ist eine großartige Bibliothek. Und ich arbeite seit einiger Zeit damit.

Aber ich kann immer noch nicht finden, warum zur Hölle dieser Ereignisanruf nicht funktioniert.

Die Daten nach der Sortierung sind richtig und der arr ist gut.

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

Die Vorlage:

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

Dank!

Answer 1

Ah OK. Was Sie tun, ist zuerst das Array StructureActivitiesTiers zu sortieren, dann seine Werte nicht beobachtbar zu ändern, dann $.observable(this.StructureActivitiesTiers).refresh(arr); aufrufen.

Der Effekt von refresh(arr) besteht darin, zuerst festzustellen, ob die Objekte im neuen Array arr tatsächlich auf vorhandene Objekte im Array StructureActivitiesTiers verweisen. Wenn dies der Fall ist, werden die gerenderten Ansichten einfach in die richtige Reihenfolge gebracht und nicht alle neu gerendert. Daher werden die nicht beobachtbaren Eigenschaftsänderungen ignoriert.

Sie können das Problem beheben zu den Eigenschaftsänderungen zu beobachten, indem sie entweder vor oder nach dem Array refresh Aufruf tun:

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

oder:

$.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/ See.

Alternativ können Sie die arr mit neuen Objekten füllen:

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

Nun ist die refresh(arr) Aufruf findet neue Objekte, keine Verweise auf bestehende, so dass es die alten Ansichten für jedes Element entfernt und fügt neue für die neue Gegenstände (macht sie offensichtlich vollständig).

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