KnockOut JS - 將按鈕綁定到集合中的項目

這是一個稍微棘手的問題。基本上，我一直試圖在KnockoutJS中基於KnockoutJS網站（http://knockoutjs.com/examples/cartEditor.html）中的一個示例構建購物車頁面。不過，我想使用jQueryUI滑塊，以便我可以調整購物車中每個產品的值。KnockOut JS - 將按鈕綁定到集合中的項目

這我已經設法好了，我可以添加一個產品（在這種情況下，Motorcars）到我的籃子，調整價值，還增加/減少值取決於汽車是否有運動套件或是一輛敞篷車。

http://jsfiddle.net/FloatLeft/UjRrJ/

然而，而不是添加的產品（「添加汽車」按鈕），然後選擇車型，我希望能夠爲特定類型（如寶馬，福特）添加至購物車點擊按鈕（例如點擊「添加寶馬」按鈕 - 此時不做任何操作）。

然而，我的簡單大腦不能解決如何將按鈕綁定到集合中的特定汽車。我想我可以通過創建一個遍歷集合的函數來找回汽車，並找到匹配字符串類型的汽車，例如，

function GetCar(carType) { 
     for (var i = 0; i < sampleCars.length; i++) { 
      if (sampleCars[i].Type == carType) { 
       return sampleCars[i]; 
      } 
     } 
    }

所以基本上我想知道我可以「添加寶馬」按鈕的點擊事件綁定到集合中的一個特定的汽車，有添加到我的車。

來源

2012-10-05 FloatLeft

如果您計劃製作多個按鈕，您可以創建一個可以創建可以採用汽車類型的事件處理程序的函數。

self.addSpecificCarLine = function (carType) { 
    return function() { 
     var car = ko.utils.arrayFirst(sampleCars, function (car) { 
      return car.Type === carType; 
     }); 
     var cartLine = new CartLine(); 
     cartLine.car(car); 
     self.lines.push(cartLine); 
    }; 
};

然後，你可以綁定到處理程序，像這樣：

<button data-bind='click: addSpecificCarLine("BMW")'>Add BMW</button>

Updated fiddle

來源

2012-10-05 18:12:10

傑夫您好，感謝您的幫助。我有一個嚴重的心理障礙。 – FloatLeft

嗨，傑夫，爲什麼self.addSpecificCarLine需要返回一個函數，當self.addLine不。 – FloatLeft

'addLine（）'只做了一件事，它爲行數組添加了一個新的CartLine。 'addSpecificCarLine（）'做了一些不同的事情，它允許你創建一個事件處理程序，它添加一個新的'CartLine'和指定的'CarType'。因此，例如，'addSpecificCarLine（）'允許您根據需要動態創建各種類型的處理程序，而不是使用硬編碼來創建「BMW」行的處理程序。 'addLine（）'是事件處理程序，'addSpecificCarLine（）'是一個事件處理程序工廠。這是否回答你的問題？ –

KnockOut JS - 將按鈕綁定到集合中的項目

回答

相關問題