Question

Can anyone please help, or give me a nudge on how to move forward with this.

I am trying to work with KnockoutJS to put together a sample app (I’m learning both MVC and trying to learn jQuery/Knockout).

The sample is based on the Cart example in the Knockout training docs – my copy/version of it is here:

JsFiddleExample

The JSON is fairly straighforward:

[{
    "occ": [
    {
        "name": "1 Room only",
        "price": 53.9},
    {
        "name": "1 B&B",
        "price": 62.16}, ],

    "TypeName": "Single",
    "TypeID": "3121",
    "TypeCount": "2"
    },
{
    "occ": [
    {
        "name": "2 B&B",
        "price": 24.23},
    {
        "name": "2 DBB",
        "price": 32.95}],

    "TypeName": "Double",
    "TypeID": "4056",
    "TypeCount": "2"
    }......

So the first drop down is linked to “TypeName” and “TypeID”.

When a selection is made from that, the Occ (2nd drop down) shows the offers available for that room (eg. 2 DBB @ 32.95).

There is a text box currently, where you can enter the quantity that you would like – however, I would like that to either be limited to a number, up to “TypeCount” in the JSON – or even better, to have another drop down, which has numbers up to “TypeCount”.

If possible, I would also like to limit what is shown if “Add Room” is clicked, and another line is added – so I don’t want to see any room types already selected in lines above, in the drop down list on the next line.

Thank you for any pointers,

Mark

Answer 1

Knockout includes a utility called ko.utils.range and you can give it a starting and ending value. You could use this to create an array of options that goes from 1 to your TypeCount.

There are several ways to write it, but here is one example:

<td class='quantity' data-bind="with: category">
    <select data-bind="visible: $parent.product, options: ko.utils.range(1, TypeCount), value: $parent.quantity"></select>
</td>

Updated fiddle: http://jsfiddle.net/rniemeyer/3t6hP/4/