ノックアウト：クリックしてボタンを作成したサーバー側

Question

私は、部分的なビューの中に剃られたビューを持っています。

私はデータを送信してコントローラに価格リストを作成し、それらをモデルに追加して、各価格の横にある「今すぐ予約」ボタンと共にリストを表示します。今すぐ予約ボタンをクリックし、価格設定の詳細の下に別のコンテンツを表示したいと考えています。

問題は、ノックアウトモデルがそれらの前に作成されたため、ダイナミックボタンでクリックイベントが機能しない可能性があるという問題です。

<div id="bookingForm" data-bind="visible: showBookingForm"> 
    <div id="pricingDetails" data-bind="visible: showPricingDetails"> 
     @Html.Partial("ProductBooking") 
    </div> 
    <div data-bind="visible: showBookNow"> 
     another content 
    </div> 
</div> 

<div class="button-block"> 
    <a data-bind="click: toggleBookingForm">Show booking form</a> 
</div> 

<script src="~/Scripts/booking-model.js" type="text/javascript"></script> 
<script type="text/javascript">    
    var viewModel= new BookingViewModel(); 
    ko.applyBindings(viewModel); 
</script> 

部分にあるボタン：

@foreach (PriceModel price in Model.Prices) 
{ 
    <tr> 
     <td>@price.PriceTotal</td> 
     <td><input type="hidden" name="priceTotal" value="@price.PriceTotal" /> 
      <input type="button" data-bind="click: toggleBookNow" value="BookNow"/> 
     </td> 
    </tr> 

<!-- this doesn't work --> 
<script> 
ko.applyBindings(viewModel); 
</script> 
<!-- /this doesn't work --> 

} 

マイノックアウト：

var BookingViewModel = function() { 
var self = this; 
self.showBookingForm = ko.observable(false); 
self.showPricingDetails = ko.observable(false); 
self.showBookNow = ko.observable(false); 

// Toggle book now button upon click 
self.toggleBookingForm = function() { 
    console.log('Toggled Book Form window'); 
    self.showBookingForm(!self.showBookingForm()); 
    console.log('Toggled Pricing Details window'); 
    self.showPricingDetails(!self.showPricingDetails()); 
} 

// THIS DOESN'T FIRE 
self.toggleBookNow = function() { 
    console.log('Toggled Book Now window'); 
    self.showBookNow(!self.showBookNow()); 
} 
}; 

私は例えば、ボタンを作成した後、私は（上記参照）部分ProductBooking内のバインディングを再適用することを試みました。

<script> 
ko.applyBindings(viewModel); 
</script> 

しかし、1つの要素内に複数のバインディングを作成することはできません。

私はまたのために今ボタンをブックを変更しようとしました：

<input type="button" data-bind="click: $root.toggleBookNow" value="BookNow"/> 

が、それは何も変わりません。

部分的に動的なボタンを作成した後、ボタンのバインディングを機能させる方法は？

Answer 1

私が追加しました：

<script type="text/javascript"> 
    ko.applyBindings(viewModel, document.getElementById('button'+@counter)); 
</script> 

を 'ボタン1' 内のボタン、各ボタン（および上記のスクリプト）、 'ボタン2'、 'ボタン3' などのdiv

これとスニペット後それを機能させる。