Question

我有一个剃刀视图，里面有局部视图。

在ProductBooking部分中，我发送数据并在控制器中创建价格列表，将它们添加到模型中，然后显示列表以及每个价格旁边的“立即预订”按钮。然后，我想点击立即预订按钮，并在定价详细信息下显示另一个内容。

问题是我无法使click事件处理动态按钮，可能是因为在它们之前创建了挖空模型。

<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 partial（见上文）中重新应用绑定，例如。

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

但是喊叫它不能在一个元素中创建多个绑定。

我还尝试更改“立即预订”按钮：

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

但它并没有改变任何事情。

如何在部分？

中创建动态按钮后使按钮绑定工作

Answer 1

我添加了：

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

带有按钮的片段后，每个按钮（以及上面的脚本）位于＆＃39;按钮1＆＃39;，＆＃39;按钮2＆＃39;，＆＃39;按钮3＆＃39; div等

这使它有效。

淘汰赛：点击按钮创建服务器端

1 个答案: