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/。