javascript - 在 Knockout 中读取复杂对象的计数

Question

我正在尝试做一个相册网站来学习。我正在处理的屏幕现在显示专辑列表。每个相册附有 0 到多张照片。

在我的 knockout View 模型中，我有:

self.Albums = ko.observableArray([]);

其中填充了我的 api 调用中的相册对象列表。每个相册都有一个照片列表。

我打电话来获取专辑:

var urialbums = '/api/Photo/GetAlbums';
$.get({ url: urialbums, contentType: "application/json" })
    .done(function (data) {
        vm.Albums(data);
    });

数据由一个 JSON 对象组成(我认为？)，它是以下内容的序列化版本:

public class UIAlbumModel {
    public int ID { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public DateTime CreatedDate { get; set; }
    public int PrivacyTypeID { get; set; }
    public string PrivacyType { get; set; }
    public List<UIPhotoModel> Photos { get; set; }
}

如您所见，它有一个照片列表。

照片是一个具有名称和照片 URL 的对象。

在我看来，我正在显示带有专辑名称的专辑列表。但是，在相册名称旁边，我试图显示相册中的照片数量。

<div data-bind="foreach: Albums">
    <div class="col-xs-3">
        <p><span data-bind="text: Name"></span> (<span data-bind="text: Photos().length"></span>)</p>
        <span class="glyphicon glyphicon-folder-open"> </span>
    </div>
</div>

但它在照片计数上失败了。

text: Photos().length

错误:

knockout-3.4.0.js:72 Uncaught TypeError: Unable to process binding "text: function (){return Photos().length }" Message: Photos is not a function

如何获取我当前正在查找的相册中的 child 照片数量？

Answer 1

将 Photos().length 更改为 Photos.length。正如错误消息所述，您尝试将照片作为函数调用，但它不是函数。