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

Question

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

在我的淘汰视图模型中，我有：

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>

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

文本：Photos().length

错误：

knockout-3.4.0.js:72 Uncaught TypeError: Unable to process binding "text: function (){return Photos().length }" 消息：照片不是 功能

如何获取我当前正在遍历的相册中的子照片数量？

Answer 1

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