javascript - 如何在 knockout observablearray 中按索引访问对象？无法处理绑定(bind)

Question

我是 stackoverflow 和 knockout 的新手，我有一个问题。我想通过索引访问一个 JSON 对象。如果我在我的代码中添加虚拟数据，它工作正常，但如果我从 JSON 添加数据并停止，它会给我一个错误。

错误未捕获的类型错误:无法处理绑定(bind)“text: function (){return Ads()[0].AdContent }”消息:无法读取未定义的属性“AdContent”

我的 View 模型:

function AdListModel () {
    var self = this;
    self.Ads = ko.observableArray([]);
    $.ajax({
        type: "GET",
        url: '/Home/GetAllAds',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            self.Ads(data); 
        },
        error: function (err) {
            alert(err.status + " : " + err.statusText);
        }
    });
}

ko.applyBindings(new AdListModel());

我收到的 JSON

[{"AdId":6,"AdContent":"sadasdasdsad","CategoryId":1,"CategoryNameRU":"Дом, стройка, ремонт"},{"AdId":12,"AdContent":"asdasd","CategoryId":1,"CategoryNameRU":"Дом, стройка, ремонт"}]

我的 HTML

   <div data-bind="text: Ads()[0].AdContent"></div>

   <div data-bind="foreach: Ads">   
      <p data-bind="text: AdId"></p>
      <p data-bind="text: AdContent"></p>
      <p data-bind="text: CategoryId"></p>
      <p data-bind="text: CategoryNameRU"></p>
   </div>

所以，基本上我只想读取索引为 0 的 JSON 对象中的一个属性，然后显示所有数组。

Answer 1

“广告”数组为空，直到您在 ajax 调用上没有得到响应。因此“Ads()[0]”是未定义的。

您可以在绑定(bind)中使用额外的检查:

<!-- ko if: Ads().length > 0 -->
<div data-bind="text: Ads()[0].AdContent"></div>
<!-- /ko -->

注意:“foreach”绑定(bind)正确处理空数组。