JsViews：可觀察刷新後出現錯誤值的UI元素

Question

JsViews是一個很棒的庫。我一直在使用它一段時間。

但我仍然無法找到爲什麼地獄這個事件調用不起作用。

排序後的數據是正確的，ARR是好的。

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

好的。你在做什麼是首先排序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/。