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

【问题标题】：JsViews: UI element with wrong values after observable refreshJsViews：可观察刷新后具有错误值的 UI 元素
【发布时间】：2016-11-09 13:49:47
【问题描述】：

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

谢谢！

【问题讨论】：

标签： jsviews

【解决方案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/。

【讨论】：