KnockoutJS: Select object as return value

Viewed 11

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?

0 Answers
Related