Javascript 无法处理Knockout.js可观察数组中未定义的集合

我有一个可观察的项目数组，其中每个项目都有一组图像（示例如下）：

或在没有可用图像时使用以下JSON：

{"itemImages":[],"id":9,"itemName":"Item 1","itemDescription":"Item 1","itemPrice":5.00,"itemQuantity":1,"itemInStock":1,"createdOn":"2015-02-25T21:41:38.193","modifiedOn":"2015-02-25T21:41:38.193"}

我遇到的问题是，图像集合并不总是填充，在这些情况下，我得到了错误：

未捕获的TypeError:无法读取未定义的属性“itemImages”

我知道错误是说集合未定义，并且一直试图通过在这些情况下将图像设置为“无图像”图像来处理此问题。即使有了这个检查，仍然会抛出错误，这意味着我没有正确地编写计算出的可观察逻辑

@section scripts {
    <script>
        $(function () {
            var ViewModel = function () {

                var self = this;

                self.items = ko.observableArray(@Html.Raw(Model.ItemsJSON));
            };


        var vm = new ViewModel();

        // Iterates over each item.
        _.each(vm.items(), function (item) {

            var self = this;

            item.imageUrl = ko.computed(function () {
                if (item.itemImages[0].length == 0)
                { var fileName = 'no-image-jpg' }
                else { fileName = item.itemImage[0].itemImageUrl }

                var url = '@Model.ImageUrlPrefix' + fileName

                return url;
            });
        //End Foreach loop.
        });

        ko.applyBindings(vm);

@节脚本{
$（函数（）{
var ViewModel=函数（）{
var self=这个；
self.items=ko.observearray（@Html.Raw（Model.ItemsJSON））；
};
var vm=new ViewModel（）；
//迭代每个项目。
_.each（vm.items（）、函数（item）{
var self=这个；
item.imageUrl=ko.computed（函数（）{
if（item.itemImages[0].length==0）
{var fileName='no image jpg'}
else{fileName=item.itemImage[0].itemImageUrl}
var url='@Model.ImageUrlPrefix'+文件名
返回url；
});
//结束Foreach循环。
});
ko.应用绑定（vm）；

然后对于Html，我迭代viewmodel上的item observable数组

<div id="list-container" class="row">
    <div data-bind="template: { name: 'list-template', foreach: items }"></div>
</div>

<script type="text/html" id="list-template">
    <div>
        <div>
            <div>
            <img data-bind="attr: { src: imageUrl }"/>
            </div>
      ...

...

---

如果有人能指出为什么我的computed observable没有捕获未定义的集合并将文件名设置为“no image.jpg”，我将不胜感激。

正如@Jeroen所指出的，您走错了方向。不是

itemImages

属性是

未定义的
。它在未定义的集合中找不到属性已定义对象

这意味着您认为您正在访问视图模型，但实际上您正在引用
未定义的

您可能未正确访问此
。您假定它是ViewModel，但它是其他内容。有关如何修复它的详细信息，请参阅

简而言之：您需要创建一个变量来保持对
this
accross函数和
computed
s的引用。例如：

function AppViewModel() {
    var self = this;

    self.firstName = ko.observable('Bob');
    self.lastName = ko.observable('Smith');
    self.fullName = ko.computed(function() {
        return self.firstName() + " " + self.lastName();
    });
}

这个问题并不是直接从你所发布的信息中得到的，你可以通过一个简短的RePro得到更好的帮助。对于这个问题，你假设这个集合是未定义的，但是这个错误说“属性”的ITEMIGATION是“未定义的”。所以它可能是代码>这个。。我已经对此进行了一段时间的研究。如果项目上的itemImages集合中存在图像，则不会抛出任何错误，并且图像会显示为所需。这只是在集合为空时。我将修改示例，以便更好地提供我所设置的内容的上下文。
function AppViewModel() {
    var self = this;

    self.firstName = ko.observable('Bob');
    self.lastName = ko.observable('Smith');
    self.fullName = ko.computed(function() {
        return self.firstName() + " " + self.lastName();
    });
}