javascript - knockout : Click button created server side

Question

我有一个 Razor View ，内部有部分 View 。

在 ProductBooking 部分中，我发送数据并在 Controller 中创建价格列表，将它们添加到模型中，然后与每个价格旁边的“立即预订”按钮一起显示该列表。然后我想单击“立即预订”按钮并在定价详细信息下方显示其他内容。

问题是我无法使点击事件在动态按钮上工作，可能是因为 knockout 模型是在它们之前创建的。

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

}

我的 knockout :

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 部分(见上文)中重新应用绑定(bind)。

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

但是有人喊道它不能在一个元素内创建多个绑定(bind)。

我还尝试将“立即预订”按钮更改为:

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

但这并没有改变任何东西。

在局部创建动态按钮后如何使按钮绑定(bind)工作？

Answer 1

我确实添加了:

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

在带有按钮的代码片段之后，“button1”、“button2”、“button3”等 div 中的每个按钮(以及上面的脚本)

这使它工作。