I am trying to convert an existing template from button clicks to a select with options. The original template looks like this:
<!-- ko foreach: {data: amounts, as: 'amount'} -->
<button type="button" data-bind="click: $parent.changeAmount.bind($parent)">
<span data-bind="text: amount.amountFormatted"></span>
</button>
<!-- /ko -->
The content of the array amounts is this:
[
{
"baseValue":"15",
"value":15,
"amountFormatted":"15,00 €",
"price":"15,00 €"
},
{
"baseValue":"25",
"value":25,
"amountFormatted":"25,00 €",
"price":"25,00 €"
},
{
"baseValue":"50",
"value":50,
"amountFormatted":"50,00 €",
"price":"50,00 €"
}
]
And this is the handler function:
changeAmount: function (amount) {
console.log(amount);
this.activeAmount(amount);
}
The console.log shows me how the return value of the button click looks like:
{
"baseValue":"50",
"value":50,
"amountFormatted":"50,00 €",
"price":"50,00 €"
}
Now I want this whole thing displayed as a select instead of buttons:
<select data-bind="options: amounts,
optionsText: 'amountFormatted',
optionsValue: 'value',
value: activeAmount,
event:{ change: changeAmount}"></select>
But with this template the select returns the entire view object instead of what a button click returns. How can I get the select to return the same object/array?