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

JsViews：UI 元素在可观察刷新后具有错误值

JsViews: UI element with wrong values after observable refresh

jsviews