Knockoutjs Cascading dropdown using the Mapping plugin: undefined reference error

Question

I'm attempting to create a cascading dropdown based on the Knockout.js Cart example but with the Mapping plugin to get my data.

I've got the mapping plugin working fine, a template working fine, the first select is good but getting an error on the second one.

Error:

Uncaught Error: Unable to parse bindings.

Message: ReferenceError: PayCodes is not defined; Bindings value: options:PayCodes, optionsValue:'Value', optionsText:'Text', value: $parent.PayCodeId

Changing the line:

<select data-bind="options:PayCodes, optionsValue:'Value', optionsText:'Text', value: $parent.PayCodeId" class='type'></select>

to: (added 'this" keyword)

<select data-bind="options:this.PayCodes, optionsValue:'Value', optionsText:'Text', value: $parent.PayCodeId" class='type'></select>

fixes the error, but the 2nd select still isn't working. It never gets any options. The PayCodes array exists, as seen in the attached JSON data.

Here is the fiddle duplicating the issue: http://jsfiddle.net/JLhSx/13/

And the formatted JSON is here in case it helps.

Any suggestions?

EDIT to Original:

Adding

Inside my "with:" section just returns the ID of my PayTypeId, so the "with:" section isn't getting a full observable array of PayTypes as I expected. How can I refactor this so the first drop down displays a list if PayTypes and the second displays the PayCodes of the selected PayType?

Updated fiddle

Thanks!

score 0 · Accepted Answer · answered Jun 20 '12 at 14:08

Ok, I've got it working. Please let me know if there is a better way though.

Updated fiddle here

I've used a foreach with nested if. This seems a bit hackish or overkill though. Right now I'm just happy it works!

<td>
    <select data-bind='options:PayTypes, optionsValue:"Id",optionsText:"PayType", value: PayTypeId ' class='type'></select>
</td>
<td data-bind="foreach: PayTypes">
    <!-- ko if: (Id() == $parent.PayTypeId())  -->
       <select data-bind="options:PayCodes, optionsValue:'Value', optionsText:'Text', value:$parent.PayCodeId" class='type'></select>
    <!-- /ko -->
</td>

Better versions without the loop are appreciated and would be certainly marked as answer.

Knockoutjs Cascading dropdown using the Mapping plugin: undefined reference error

1 Answers1