Knockout cross class data binding

Question

Goal: Give the user the ability to adjust mapping results.

I am running into an issue where I need to actually change the instance used of a data bound element. Disclaimer: My json data structure may be off and I am open to possible modifications. I am coding a table header mapping app so a user can verify that the headings mapped by the server are correct. The user will have the ability to map the headers if there is an issue. I have not been able to figure out how to actually update the data bound to the result when the select menu is changed. It feels like it should be super easy. I keep finding myself with basically a finished knockout app less the last step...

Markup Snippet:

<div id="wrapper" data-bind="foreach: headings">
    <h1>Bind from this</h1>
    <select data-bind="value: selectMenuIdVal, event: { change: updateListing }">
    <option> </option>
        <!-- ko foreach: $root.headings -->
        <option data-bind="value: $data.CC_FIELD_ID, visible: $data.VENDOR_FIELD_NAME(), text: $data.VENDOR_FIELD_NAME"></option>
        <!-- /ko -->
    </select>
    <h1>To this</h1>
    <ul data-bind="foreach: listingFields">
        <li data-bind="text: $data.VALUE"></li>
    </ul>
</div>

KO Snippet:

var Heading = function(data) {
    var self = this;

    var heading = ko.mapping.fromJS(data, {}, this);
        heading.selectMenuIdVal = ko.observable(heading.CC_FIELD_ID());
        // heading.listingFields gets mapped by the mapping plugin

    this.updateListing = function(ko_evt, js_evt) {
                    //TODO
            // Get the listing results from the value of the select menu

            // self.listingFields(those listings);
    }

    return heading;
}

Here is my fiddle: http://jsfiddle.net/breck421/SLT9B/1/

Answer 1

I really not sure if undertood you right.

Please let me know if this is what you are looking for :

this.updateListing = function (ko_evt, js_evt) {
    console.log("fired");
    //Do something freaking awesome!!!!!!!
    if (vm.dataRepo) {
        for (var i = 0; i < vm.dataRepo.HEADINGS.length; i++) {
            if (vm.dataRepo.HEADINGS[i].CC_FIELD_ID == heading.selectMenuIdVal()) {


                var listingFields = [];

                for (var j = 0; j < vm.dataRepo.LISTINGS.length; j++) {
                    var listing = vm.dataRepo.LISTINGS[j];
                    var field = listing[i];

                    if (field) {
                        listingFields.push(field);
                    }
                }
                heading.listingFields(listingFields);

                //            heading.listingFields = listingFields;
            }
        }
    }
}

See fiddle

I hope it helps.