javascript - knockout : a custom binding for observableArray which renders only when complete

Question

好吧，标题可能有点困惑，所以我会解释......

我正在编写一个自定义绑定(bind)，我将向其传递一个 observableArray。这个 observableArray 是异步填充的，元素被一个一个地插入。

问题是每次 observableArray 发生变化时我的自定义绑定(bind)都会被调用(update 方法)。这是有道理的，但在这种情况下没有帮助，因为这意味着第一个元素被渲染 n 次，其中 n 是 observableArray 的长度，第二个元素被渲染 n-1 次，只有 nth 元素被渲染一次。

谁能解释一种让自定义绑定(bind)只在任何时候做某事的简洁方法

• observableArray 已完全填充，或者
• 添加了自定义绑定(bind)尚未呈现的元素时？

我可以想出几种解决方法，使用附加属性/可观察对象作为父 View 模型上的标志，表示“完全填充，您现在可以呈现项目”或每个元素上的属性说“你已经渲染了我”。然而，这些都很尴尬，特别是因为 observableArray 中的对象也有一个 observableArray 属性。

没有更好的 Knockout/MVVM 解决方案来解决这个问题吗？

更新:为了清楚起见，我在上面构建的是这样的

<domElmnt data-bind="myBinding: { collection: TypeGroups }" />

在哪里

TypeGroups = ko.observableArray();

TypeGroups 中包含的元素都是另一个具有可观察属性的 View 模型的实例。

每次我调用 TypeGroups.push(obj) 时，自定义绑定(bind)都会被再次调用。

Answer 1

无法准确判断是否有必要，但如果必须将 customBinding 放在 observableArray 上，我会这样做。

您想做的是原子更新。和通常的数组拼接一样，有splice方法。

yourArray.splice(atIndex, 0, elem1, elem2, elem3 ...)

但像那样它并不是真正有用:

yourArray.splice.apply(yourArray, [index, 0, elem1, elem2, elem3 ...])

它不是那么漂亮，但我们可以做得更好。

function append(array, values) {
    var params = [array().length, 0];
    params.push.apply(params, values);
    array.splice.apply(array, params);
}

我很确定使用 splice 将自动附加所有元素，而无需多次调用更新。另一方面，调用 array.push.apply(array, values) 可能就足够了，不需要拼接。

但是!

如果我处于您的位置，我会将绑定(bind)从 obserableArray 移动到可观察数组内的项目。我不知道你为什么在更新后迭代所有项目。如果元素被处理一次，是否有任何理由多次处理已处理的项目？如果不是，那么自定义绑定(bind)可能不会在应该使用的地方使用。

在不了解您的问题的更多信息的情况下，很难说什么是处理您的问题的最佳方法。