挖空：點擊按鈕創建服務器端

在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"/>

，但它不會改變任何東西。

如何使按鈕綁定工作後，我創建了部分動態按鈕？

來源

2017-06-12 nickornotto

你的代碼實際上在[fiddle]（https://jsfiddle.net/a4usbya8/）中工作得很好。我建議用'text：console.log（$ data）'來替換'click：toggleBookNow'，以更好地理解範圍。或者，我會建議[這]（https://chrome.google.com/webstore/detail/knockoutjs-context-debugg/oddcpmchholgcjgjdnfjmildmlielhof）鍍鉻插件調試淘汰賽。 –

這可以幫助：http://knockoutjs.com/documentation/unobtrusive-event-handling.html –

我並添加：

<script type="text/javascript"> 
    ko.applyBindings(viewModel, document.getElementById('button'[email protected])); 
</script>

與內 '按鈕1' 的按鈕，每個按鈕（和上面的腳本）， '按鈕2'， 'BUTTON3' 等的div

此代碼段後讓它工作。

來源

2017-06-13 15:53:44 nickornotto

挖空：點擊按鈕創建服務器端

回答

相關問題