淘汰赛：无法从observableArray获取特定值

Question

我用viewmodel中的一些音乐专辑的数据创建了数组。 我可以在foreach循环中使用此数组（例如），但不能仅显示该数组中的一个值。

我的视图模型：

function CD(data) {
    this.Author = ko.observable(data.Author);
    this.Title = ko.observable(data.Title);
    this.Price = ko.observable(data.Price);
    this.Label = ko.observable(data.Label);
    this.Id = ko.observable(data.Id);
}

function NewsListViewModel() {
    var self = this;
    self.newsList = ko.observableArray([]);

    $.getJSON("/music/news", function (allData) {
        var mapped = $.map(allData, function (item) { return new CD(item) });
        self.newsList(mapped);
    });

    self.oneObject = ko.computed(function () {
        return self.newsList()[0].Title;
    });
}

$(document).ready(function () {
    ko.applyBindings(new NewsListViewModel());
});

以及我如何在html中使用它：

<ul data-bind="foreach: newsList">
     <li data-bind="text: Title"></li>
     <li data-bind="text: Author"></li>
     <li data-bind="text: Price"></li>
     <li data-bind="text: Label"></li>
</ul>

这很完美。 但是，如果我尝试另外显示一个值：

<ul data-bind="foreach: newsList">
     <li data-bind="text: Title"></li>
     <li data-bind="text: Author"></li>
     <li data-bind="text: Price"></li>
     <li data-bind="text: Label"></li>
</ul>
...
<p data-bind="text: oneObject"</p>

它不起作用，萤火虫抛出错误：

类型错误：self.newsList（）[0]。标题未定义

为什么我不能获得一个特定值，但可以显示整个列表？

PS。 代码<p data-bind="text: newsList()[0].Title"</p>也不起作用。

Answer 1

因为$.getJSON是异步的，所以会出现错误。

因此，在声明您的计算值时，不需要在newsList准备好项目，因此没有您可以访问的第一个元素。

因此，您需要检查计算出的您的newsList不是空的（无论如何，您的服务器也可以返回一个空列表，因此进行此检查始终是一件好事），然后才访问第一个元素：

self.oneObject = ko.computed(function () {
    if (self.newsList().length > 0)
        return self.newsList()[0].Title();
    return 'no title yet';
});

注意：由于Title是可观察的，因此您还需要编写.Title()以获取其值。

Answer 2

我可以看到您的代码有一些问题：

1. $.getJSON是异步的，因此当首次被Knockout访问时， self.newsList为空。 这又意味着self.newsList[0]是未定义的。
2. return self.newsList()[0].Title; 在计算的observable中不返回您希望其返回的值。 它应该是return self.newsList()[0].Title();
3. 您不必重新发明轮子，可以使用映射插件来映射数据： http : //knockoutjs.com/documentation/plugins-mapping.html