请检查此绑定，因为当我更新主可观察数组时，绑定需要太多时间：大约需要12到15秒。
当size较小时，它不需要花费太多时间，但是当size大于200时，则需要花费一些时间来绑定html。
我也减少了json，但仍然没有太大的改善。
<table class="table table-bordered table-hover quot-tble mb0">
<thead>
<tr>
<th class="wd245px">Room category </th>
<!-- ko if:this.CheckRedeem() != '0'-->
<th class="wd50px">Points</th>
<!-- /ko -->
<th class="text-center wd145px">Board Basis</th>
<th class="wd50px">Offer</th>
<th class="text-center wd145px">Total for <span id="lblnoofnights" data-bind="text: NoofNights() + ' '"></span>Nights</th>
<th class="text-center wd145px">Policy</th>
<th class="wd106px text-center">Book</th>
</tr>
</thead>
<tbody>
<!-- ko foreach: RoomTypesDispNew()-->
<!-- ko foreach:$data-->
<tr class="" data-bind="attr: { 'data-roomname': RoomTypeName.toString().split('|***')[0] }">
<td class="wd245px">
<div class="roomcatagory">
<div class="pl8 rtype">
<span data-bind="text: RoomTypeName.toString().split('|***')[0]"></span>
<a style="display: inline-block;vertical-align: middle;" data-bind="click: function () { ShowEssentialsInfo(SupplierName, RoomNo, $index(), $parentContext.$index(), OwnsystemHotelId, RoomTypeId, '', ContractID, MealId, IsPolicyDynamic) }, attr: { class: 'soap-popupbox ' + (EssentialInformation == null || EssentialInformation == '' || SupplierName.toLowerCase() == 'trvaco' ? 'hide' : '') }" title="Essential Information"
href="#info">
<span class="info_icon list_details_srip"></span>
</a>
<!-- ko if:hdnIsShowSupplierFilter == '1'-->
<br /> <span class='hotel_type' data-bind="text: RoomTypeName.toString().split('|***')[1]=='oth' ? 'Withinearth' : RoomTypeName.toString().split('|***')[1]"></span>
<!-- /ko -->
</div>
<%-- <div class="avlableinfo quotH">
<span>
</span>
</div>--%>
</div>
<div class="tbl-cell" data-bind="foreach: $root.OriginalNoofRooms">
<div class="text-center" data-bind="if: $index() > 0 && $parent.IsCombineRoom">+</div>
<div class="" data-bind="if: $parent.IsCombineRoom ? (true) : ($parent.RoomNo == RoomNo),attr: { class: $index() > 0 ? 'ad-ch-div' : 'ad-ch-div' }" >
<span style="" data-bind="foreach: new Array(parseInt(NoofAdults))">
<i class="fa fa-user " style=""></i>
</span>
<span style="" data-bind="foreach: new Array(parseInt(NoofChild))">
<i class="fa fa-user font-10"></i>
</span>
<br>
<span class="font-12 text-black" data-bind="text: 'Room ' + RoomNo "></span>
</div>
</div>
<br>
</td>
<!-- ko if:($index()==0 || (IsCombineRoom))&& this.CheckRedeem() != '0'-->
<td class="wd50px text-center" data-bind="attr: { rowspan: IsCombineRoom ? 1 : RowSpan }">
<span data-bind="attr: { class: TotalPoints == null || parseInt(TotalPoints) == 0 || this.CheckRedeem() == '0' ? 'hide' : 'point_gold_silver ' + LoyaltyPointsIcon + '_Points' }"><span class="point_text" data-bind=" text: TotalPoints">999</span><span class="points_tooltrip"><span class="point_tool_text"></span></span></span>
</td>
<!-- /ko -->
<!-- ko if:$index()==0 || (IsCombineRoom)-->
<td class="text-left wd145px" data-bind="attr: { rowspan: IsCombineRoom ? 1 : RowSpan }">
<span data-bind="attr: { class: MealClass + ' list_details_srip' }" class=""></span>
<span class="font-13 ver_base" data-bind="text: MealName"></span>
</td>
<!-- /ko -->
<td class="wd50px text-center">
<span data-bind="if: OfferDescription.length > 0"><i class="fa fa-tags" title="kLPWBJS" data-bind=" attr: { title: OfferCode + ' ' + OfferDescription }" aria-hidden="true"></i></span>
</td>
<!-- ko if:$index()==0 || (IsCombineRoom)-->
<td class="text-center wd145px" data-bind="attr: { rowspan: IsCombineRoom ? 1 : RowSpan }">
<div class="" data-bind="attr: { class: (WithOutDiscount == null || WithOutDiscount == '' || WithOutDiscount == '0' || (parseInt(RoomPrice) == parseInt(WithOutDiscount)) ? ' hide line_ht hide' : ' line_ht') }">
<span class="priceline"><span class=" blue_pricecol currencysymbol red_txt" data-bind="html: this.CurrencySymbol()"></span><span class="blue_pricecol currencytext red_txt" data-bind=" text: CalculatePrice(WithOutDiscount)"></span></span>
<br>
<a class="soap-popupbox hotel_type" title="Rate breakup"
href="#breakup" data-bind="click: function () { ShowRateBreakup(IsCombineRoom, IsPolicyDynamic, IsCombineRoom ? $index() : 0, RoomTypesDispNew()[$parentContext.$index()]) }, attr: { href: '#Rate-breakup-popup-new' }">
<span class=""><span class="currencysymbol" data-bind="html: this.CurrencySymbol()"></span><span class="currencytext" data-bind=" text: CalculatePrice(RoomPrice)"></span></span></a>
</div>
<div class="" data-bind="attr: { class: (WithOutDiscount == null || WithOutDiscount == '' || WithOutDiscount == '0' || (parseInt(RoomPrice) == parseInt(WithOutDiscount)) ? '' : ' hide') }">
<a class="soap-popupbox hotel_type" title="Rate breakup"
href="#breakup" data-bind="click: function () { ShowRateBreakup(IsCombineRoom, IsPolicyDynamic, IsCombineRoom ? $index() : 0, RoomTypesDispNew()[$parentContext.$index()]) }, attr: { href: '#Rate-breakup-popup-new' }">
<span class="currencysymbol" data-bind="html: this.CurrencySymbol()">AED</span> <span
class="currencytext" data-bind="text: CalculatePrice(RoomPrice)"></span>
</a>
</div>
</td>
<!-- /ko -->
<td class="policy-icon text-center wd145px">
<a href="#cancellation" class="soap-popupbox display_inline" data-bind="click: function () { ShowCancelationPolicy($data, $parents[1].XMLCode, $parents[1].ContractName, $parents[1].OfficeID, $parents[1].XMLHotelCode, IsPolicyDynamic, IsCombineRoom) }">
<!-- ko if: cancellationText=='' -->
<span class="policy_icon list_details_srip" data-bind="attr: { id: 'policyicon' + $parentContext.$index() + $index() }"></span>
<!-- /ko -->
<!-- ko if: cancellationText!='' -->
<!-- ko if: cancellationText.toString().toLowerCase().indexOf('within') >= 0 -->
<i class="fa fa-usd doller-icon" data-bind="attr: { id: 'policyicon' + $parentContext.$index() + $index() }"></i>
<!-- /ko -->
<!-- ko if: cancellationText.toString().toLowerCase().indexOf('free') >= 0 -->
<i class="fa fa-check green-color" data-bind="attr: { id: 'policyicon' + $parentContext.$index() + $index() }"></i>
<!-- /ko -->
<span data-bind="text: cancellationText, attr: { id: 'policytext' + $parentContext.$index() + $index(), class: (cancellationText.toString().toLowerCase().indexOf('within') >= 0 ? 'line_div text-red' : 'line_div green-color ') }"></span>
<!-- /ko -->
<span data-bind="attr: { id: 'policy' + $parentContext.$index() + $index() }"></span>
</a>
</td>
<!-- ko if:$index()==0 || (IsCombineRoom)-->
<td class="text-center wd106px hotellist" data-bind="attr: { rowspan: IsCombineRoom ? 1 : RowSpan }">
<a data-bind="click: function () { BookNow(IsCombineRoom, IsCombineRoom ? $index() : 0, RoomTypesDispNew()[$parentContext.$index()], $parents[1].XMLHotelCode, $parents[1].OfficeID, $parents[1].ContractName) }, text: IsSelected ? 'Added' : BookingStatus.replace(' ', '') == 'OnRequest' ? 'Book On Request' : BookingStatus.replace(' ', '') == 'PackageRate' ? 'Book PackageRate' : 'Book Available', attr: { style: BookingStatus.replace(' ', '') == 'OnRequest' ? 'background:#ff5d00!important;' : '', title: RowSpan + ' Units', class: 'pull-right full-width button btn-small btn_booknow text-center back_blue_btn textcap' }">Book Available
</a>
</td>
<!-- /ko -->
</tr>
<!-- /ko -->
<!-- /ko -->
</tbody>
</table>