CODEWITHSUNDEEP
knockout.js
Ian
Ian

Reputation: 34539

Custom Mapping entire Array

I'm trying to apply a custom mapping using Knockout. I've got a JSON object that contains this JSON fragment:

{
    "feature": { "id": "BEAM_TYPE2" },
    "label": { "ux_value": "BEAM_TYPE", "tooltipText": "" },
    "help": { "ux_title": "BEAM_TYPE_HELP", "ux_value": "BEAM_TYPE_DESCRIPTION" },
    "control": { 
         "type": "dropdown", 
         "options": [
             { "ux_value": "BEAM_TYPE_BOX", "value": "BOX" }, 
             { "ux_value": "BEAM_TYPE_IBEAM", "value": "IBEAM" }, 
             { "ux_value": "BEAM_TYPE_PFC", "value": "PFC" }, 
             { "ux_value": "BEAM_TYPE_OPEN", "value": "OPEN" }, 
             { "ux_value": "BEAM_TYPE_ZTYPE", "value": "ZTYPE" }, 
             { "ux_value": "BEAM_TYPE_BOX_ANGLE", "value": "BOX_ANGLE" }, 
             { "ux_value": "BEAM_TYPE_STEP", "value": "STEP" }
         ], 
         "value": "BOX" 
    }
}

Ultimately the options get converted to an observable array and bound to a dropdown. However I've now decided that I actually want to vary the values within this array dynamically, and instead provide a computed function, so a dummy hardcoded example:

ko.computed(function() {
    return [
       { ux_value: "A", value: "A" },
       { ux_value: "B", value: "B" },
       { ux_value: "C", value: "C" }
    ];
});

I decided using the custom binding in ko.mapping would be the best way to do this, so I tried using the creation function:

var mapping = {
        'options': {
            create: function (options) {
                debugger;
            }
        }
    };

Unfortunately what I've found is that I hit the breakpoint for every single item within the array, so in the example shown I'd hit my breakpoint 7 times, whereas I only want to hit it once and return the resultant object. Would the correct way of handling this to work on the control instead of the options and manually creating the bindings for all the other values or is there a simpler way of doing this?

Upvotes: 0

Views: 56

Answers (1)

Nathan Fisher
Nathan Fisher

Reputation: 7941

You could try moving one level up and create a mapping function for the control property instead.

var mapping = {
        'control': {
            create: function (control) {
                debugger;
            }
        }
    };

And create add the computed functions to that.

Upvotes: 1

Related Questions