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元素

1 个答案: