如何在Knockout JS中始终使用数组中的最后一张图片？

方案1：在ViewModel中添加计算属性（推荐） #

遵循MVVM模式，把筛选和取最后一项的逻辑放到ViewModel里，更易维护且符合框架设计思想：

// 在你的ViewModel中新增以下计算属性
self.LastPropertyPhoto = ko.computed(function() {
    // 先筛选出所有类型为Photo的图片
    var validPhotos = self.PropertyDetails().Images().filter(function(img) {
        return img.DocumentSubType().SystemName() === "Photo";
    });
    // 返回最后一张，无符合条件图片时返回null
    return validPhotos.length > 0 ? validPhotos[validPhotos.length - 1] : null;
});

对应视图代码可大幅简化，无需遍历所有图片：

<div style="position: absolute; right: 0px; bottom: 0px">
    <!-- ko with: LastPropertyPhoto -->
    <div
        data-bind="attr:{id: 'picture-' + Id() }, widget: {
                    kind: 'ImageManipulator',
                    config: {
                        width: '546px',
                        height: '380px',
                        imageUrl: Url().indexOf('http://www.example.com/estate-agent-software/ImageResizeHandler.do') == -1 ? Url() + '?width=NaN' : Url() + '&width=NaN'
                    },
                    identification: {
                        Id: 'property-image-' + Id()
                    }}"
    ></div>
    <!--/ko-->
</div>

该计算属性会自动监听图片数组的变化，数组更新时会重新计算最后一张符合条件的图片，视图同步更新。

方案2：直接在视图中处理（无需修改ViewModel） #

如果不想改动ViewModel，可直接在视图里完成筛选和取最后一项的操作：

<div style="position: absolute; right: 0px; bottom: 0px">
    <!-- ko with: (PropertyDetails().Images().filter(function(img) { 
        return img.DocumentSubType().SystemName() === "Photo"; 
    })).slice(-1)[0] -->
    <div
        data-bind="attr:{id: 'picture-' + Id() }, widget: {
                    kind: 'ImageManipulator',
                    config: {
                        width: '546px',
                        height: '380px',
                        imageUrl: Url().indexOf('http://www.example.com/estate-agent-software/ImageResizeHandler.do') == -1 ? Url() + '?width=NaN' : Url() + '&width=NaN'
                    },
                    identification: {
                        Id: 'property-image-' + Id()
                    }}"
    ></div>
    <!--/ko-->
</div>

代码说明：

• filter方法筛选出所有Photo类型的图片
• slice(-1)取出数组最后一个元素（返回数组，需用[0]取具体项）
• with绑定仅在存在符合条件的图片时渲染内容

原写法的问题 #

原代码中$index() ===7是固定取第8张图片（Knockout的$index从0开始计数），当图片数组长度变化、顺序调整或符合条件的图片数量不足时，无法正确定位到最后一张目标图片，上述两种方案均为动态获取最后一项，适配数组的任何变化。

内容的提问来源于stack exchange，提问作者2ndLineDan