Knockout: нажмите кнопку, созданную на стороне сервера

У меня есть вид бритвы с частичным видом внутри.

В части ProductBooking я отправляю данные и создаю список цен в контроллере, добавляю их в модель и затем показываю список вместе с кнопкой "Забронировать сейчас" рядом с каждой ценой. Затем я хочу нажать кнопку "Забронировать сейчас" и отобразить другое содержимое под деталями ценообразования.

Проблема в том, что я не могу сделать событие щелчка на динамических кнопках, вероятно, потому, что перед ними была создана нокаут-модель.

<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>

Но крики он не может создать несколько привязок внутри одного элемента.

Я также попытался изменить кнопку "Забронировать сейчас" для:

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

но это ничего не меняет.

Как заставить привязки кнопок работать после создания динамических кнопок в частичном?