Knockout：如何將數據綁定到下拉列表中的選定值？

Question

目的：我正在嘗試開發一個簡單的腳本，以便從下拉列表中自動選擇一個尺寸並放入購物車，然後繼續結帳。這是在零售網站上的代碼：

<div id="add"> 
        <div class="product-sizes" data-bind="visible: showSizes"> 
         <label for="ddlStocks">Size</label>        
         <select name="stocks" id="ddlStocks" data-bind="value: selectedStock, isolatedOptions: sizes, optionsText: 'DisplayName', optionsCaption: 'Size', optionsValue: 'StockId'" data-mini="true">         
         <option value="">Size</option><option value="134934">UK6.5 - In Stock</option><option value="134935">UK7.5 - In Stock</option><option value="134936">UK8 - In Stock</option><option value="134937">UK8.5 - In Stock</option><option value="134938">UK9 - In Stock</option><option value="134939">UK9.5 - In Stock</option><option value="134940">UK10 - In Stock</option><option value="134941">UK10.5 - In Stock</option><option value="134942">UK11 - In Stock</option><option value="134943">UK12 - In Stock</option><option value="134944">UK13 - In Stock</option></select> 
         <div class="relax">&nbsp;</div> 
        </div> 
        <div id="cphContent_pnSizeGuide" class="size-guide" style="display:none;"> 

         <a href="/popup/popup-sizechart.aspx" class="show-popup-window"><img alt="" src="/public/images/icons/size-guide.gif"><span>Size Guide</span></a> 
        </div> 
        <div class="quantities"> 
         <div data-bind="visible: showQuantities" style="display: none;"> 
          <label for="ddlQuantities">Quantity</label> 
          <select name="quantities" id="ddlQuantities" data-bind="value: selectedQuantity, 
                isolatedOptions: quantities" data-mini="true">  

          <option value="1">1</option></select> 
         </div>        
         <input type="button" class="submit" id="addToCart" data-bind="click: addToCart, visible: showAddButton" value="ADD TO CART"> 
         <input type="button" class="submit" id="requestStockAlert" data-bind="click: requestStockAlert, visible: showRequestButton" value="REQUEST STOCK ALERT" style="display: none;"> 
        </div> 
</div> 

這是我所生成的代碼（我可以選擇正確的尺寸，並將代碼咔噠「加入購物車」，但我無法弄清楚如何將數據-bind所有選擇值

var size = "UK9.5 - In Stock"; 
function setSelectedIndex(s, v) { 
for (var i = 0; i < s.options.length; i++) { 
if (s.options[i].text == v) { 
s.options[i].selected = true; 
return; 
} 
} 
} 
setTimeout(function() { setSelectedIndex(document.getElementById("ddlStocks"),size); }, 0530); 
setTimeout(function() { ko.applyBindingsToDescendants(document.getElementById('ddlStocks')); }, 0550); 

function addToCart() { document.getElementById("addToCart").click(); 
} 

setTimeout(function() { addToCart(); }, 1530); 

Answer 1

Knockout屬性有一些偉大的documentation和tutorials，你可以去通過，以幫助你熟悉它。

爲您發出，這就是我想你需要做。 JSFiddle Demo

的JavaScript

var sizeData = [ 
    {id:"134934", name:"UK6.5 - In Stock"}, 
    {id:"134935", name:"UK7.5 - In Stock"}, 
    {id:"134936", name:"UK8 - In Stock"}, 
    {id:"134937", name:"UK8.5 - In Stock"}, 
    {id:"134938", name:"UK9 - In Stock"}, 
    {id:"134939", name:"UK9.5 - In Stock"}, 
    {id:"134940", name:"UK10 - In Stock"}, 
    {id:"134941", name:"UK10.5 - In Stock"}, 
    {id:"134942", name:"UK11 - In Stock"},  
    {id:"134943", name:"UK12 - In Stock"}, 
    {id:"134944", name:"UK13 - In Stock"} 
]; 
var availableQuantities = [1,2,3,4,5,6,7,8,9,10]; 

var selectedQuantity = ko.observable(); 
var selectedStock = ko.observable(); 

var addToCart = function(){ 
    alert("adding stuff to cart"); 
} 
var requestStockAlert = function(){ 
    alert('requesting Stock alert'); 
}; 
var showSizes = ko.observable(true); 
var showQuantities = ko.observable(true); 
var showAddButton = ko.observable(true); 
var showRequestButton = ko.observable(true); 
var vm = { 
    selectedStock: selectedStock, 
    sizeData: sizeData, 
    addToCart: addToCart, 
    showSizes: showSizes, 
    showQuantities: showQuantities, 
    selectedQuantity: selectedQuantity, 
    showAddButton: showAddButton, 
    showRequestButton: showRequestButton, 
    availableQuantities: availableQuantities, 
    requestStockAlert: requestStockAlert 
    };  

ko.applyBindings(vm); 

vm.selectedStock(sizeData[5]); 
vm.selectedQuantity(availableQuantities[4]); 

HTML

<div id="add"> 
    <div class="product-sizes" data-bind="visible: showSizes"> 
     <label for="ddlStocks">Size</label> 
     <select name="stocks" id="ddlStocks" data-bind="options: sizeData, 
         optionsText: 'name', 
         value: selectedStock, 
         optionsCaption: 'Size...'"></select> 

     <div class="relax">&nbsp;</div> 
    </div> 
    <div id="cphContent_pnSizeGuide" class="size-guide" style="display:none;"> <a href="/popup/popup-sizechart.aspx" class="show-popup-window"><img alt="" src="/public/images/icons/size-guide.gif" /><span>Size Guide</span></a> 

    </div> 
    <div class="quantities"> 
     <div data-bind="visible: showQuantities" style="display: none;"> 
      <label for="ddlQuantities">Quantity</label> 
      <select name="quantities" id="ddlQuantities" data-bind="options: availableQuantities, 
         value: selectedQuantity"></select>    
     </div> 
     <input type="button" class="submit" id="addToCart" data-bind="click: addToCart, visible: showAddButton" value="ADD TO CART" /> 
     <input type="button" class="submit" id="requestStockAlert" data-bind="click: requestStockAlert, visible: showRequestButton" value="REQUEST STOCK ALERT" style="display: none;" /> 
    </div> 
</div> 

<div data-bind="with: selectedStock"> 
    <p data-bind="text: name"></p> 
</div> 
<div data-bind="with: selectedQuantity"> 
    <p data-bind="text: $data"></p> 
</div>