如何获得 Knockout 中 observable 的长度？

Question

我在 knockout 中有一个可观察到的 sizeDetails，我需要在 knockout 模板中获取长度。我的观察值低于

sizeDetails: ko.observable()

在 Ajax 调用成功时，我已将可观察设置如下

  self.sizeDetails({sizeGuideDetails: sizeGuideDetails,
                    shopBySizeDetails: shopBySizeDetails
                  });

如何在knockout模板中分别获取sizeGuideDetails和shopBySizeDetails的长度

Answer 1

由于键本身是对象，我们必须得到它们的长度，如this。

这更多地是关于 JavaScript 的，而不是 Knockout。要获取 Knockout 可观察对象的值，您可以像调用函数一样调用它。例如：sizeDetails()。在这种情况下，它将 return 对象，然后我们可以获得单独的大小，并将它们 return 放在一个数组或任何适合你的格式中。

function getSizeDetails(){
    const sizeDetailsObject = self.sizeDetails();
    let sizes = [];
    for (var key in sizeDetailsObject) {
        //check if key exists
        if (sizeDetailsObject.hasOwnProperty(key)) {
            //since key is sure to be an object, get its length like this:
            sizes.push(Object.keys(sizeDetailsObject[key]).length);
        }
    }
    return sizes;
};

您还可以创建一个 pure Computed observable，其值会在 sizeDetails 更新时自动更新。

self.sizes = ko.pureComputed(function(){
    const sizeDetailsObject = self.sizeDetails();
    let sizes = [];
    for (var key in sizeDetailsObject) {
        if (sizeDetailsObject.hasOwnProperty(key)) {
            sizes.push(Object.keys(sizeDetailsObject[key]).length);
        }
    }
    return sizes;
}, self);

现在您随时可以通过调用 self.sizes() 获得最新尺寸。

要单独获取它们的尺寸，您可以按照 Erick 和 Bivo 在他们的回答中提到的那样做。

Answer 2

试试

<div data-bind="html: sizeDetails().sizeGuideDetails.length"></div>
<div data-bind="html: sizeDetails().shopBySizeDetails.length"></div>

Answer 3

sizeDetails().sizeGuideDetails.length 或 sizeDetails().sizeGuideDetails().length 取决于 sizeGuideDetails 是否可观察。与 shopBySizeDetails.

相同

您可以在 html 中任何您喜欢的地方使用它，例如：

<span data-bind="text: sizeDetails().sizeGuideDetails().length">

或没有任何 html 标签：

一些 html 如果条件为真

如何获得 Knockout 中 observable 的长度？

How to get the length of an observable in Knockout?

knockout.js

magento2