敲除:可观察数组没有被正确绑定——只有1个结果显示，而api返回6

knockout: observable array not getting binded properly - only 1 result being shown while api returns 6

本文关键字：结果 1个 只有 显示 返回 api 绑定 数组 观察 敲除      更新时间：2023-09-26

Html代码，具有敲除结合

$(document).on('click', 'div.toggleCarousel', function () {
                D_usedSearch.similarCarsCarousel.showCarousel($(this));
            });
showCarousel: function (toggleBtn) {
            var carouselMain = toggleBtn.parent().find('div.similarCarCarousel');
            var carouselList = carouselMain.find('li');
                $.ajax({
                    url: '/webapi/profileRecommendations/',
                    type: 'GET',
                    data: 'profileId=' + toggleBtn.parents('li').find('a').eq(3).attr('profileid'),
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    beforeSend: function (xhr) { xhr.setRequestHeader('sourceid', '1'); },
                    success: function (response) {
                        D_usedSearch.similarCarListings(response);
                    }
                });
              });
        }

similarCarListings：ko.obsobservableArray（[]）

api返回6个对象，但在ui中只显示了一个。

有人能告诉我哪里错了吗？我是淘汰赛新手？我需要装订还是做其他事情？

在HTML中，您已经编写了以下数据绑定：

foreach: D_usedSearch.similarCarListings

此数据绑定之后的<li>充当模板，敲除使用该模板为名为similarCarListings的数组中的每个项呈现列表项。

Knockout不会触摸HTML，直到您通过调用ko.applyBindings告诉它这样做。此方法至少需要一个参数："Viewmodel"，它包含渲染UI所需的所有信息。

您编写的数据绑定至少需要以下视图模型（VM）才能工作：

var vm = {
  D_usedSearch: {
    similarCarListings: ko.observableArray([])
  }
};
ko.applyBindings(vm);

在success处理程序中，您为可观察阵列提供了新项目：

success: function (response) {
  vm.D_usedSearch.similarCarListings(response);
}

如果这有帮助，请告诉我。如果你还没有应用绑定，你可能会遇到一些错误。。。

这是一个淘汰赛的例子，没有所有与淘汰赛无关的东西：

var exampleServerData = [{
  ProfileId: "0",
  CarName: "Car Name 0",
  OriginalImgPath: "http://img.carwale.com/used/no-cars.jpg",
  Price: "1000$",
  Url: "http://stackoverflow.com",
  Km: "40000",
  Fuel: "LPG",
  MakeYear: "2000",
  AreaName: "Area 0",
  CityName: "City 0"
}, {
  ProfileId: "1",
  CarName: "Car Name 1",
  OriginalImgPath: "http://img.carwale.com/used/no-cars.jpg",
  Price: "2000$",
  Url: "http://stackoverflow.com",
  Km: "30000",
  Fuel: "LPG",
  MakeYear: "1000",
  AreaName: "Area 1",
  CityName: "City 1"
}];
var vm = {
  D_usedSearch: {
    similarCarListings: ko.observableArray([])
  }
};
ko.applyBindings(vm);
// This goes in your success callback
vm.D_usedSearch.similarCarListings(exampleServerData);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul data-bind="foreach: D_usedSearch.similarCarListings">
  <li data-bind="attr: { id: 'SimilarListing-' + $index() }">
    <img data-bind="attr: { 
                    profileId: ProfileId, 
                    alt: CarName, title: CarName, 
                    'src': OriginalImgPath }">
    <div data-bind="text: Price"></div>
    <a data-bind="attr: { href: Url }, text: CarName"></a>
    <p>
      <span data-bind="text: Km + ' km'"></span>
      <span data-bind="text: Fuel"></span>
      <span data-bind="text: MakeYear"></span>
    </p>
    <p>
      <span data-bind="text: AreaName"></span>
      <span data-bind="text: CityName"></span>
    </p>
  </li>

相关文章：