CanJS can-value does not work for multi-select when options are rendered using Map?

243 Views Asked by At

I'm having trouble getting the selected values to be rendered using the can-value helper for multi-select inputs.

This problem specifically occurs when the options are rendered dynamically using a can.Map as opposed to having the options available in the DOM.

Here is a fiddle to explain the issue:

http://jsfiddle.net/neildcruz19/ramey3zo/6/

Control

var selectControlInst = null;

var selectControl = can.Control({
},{

    init : function ( element, options) {
        $( element ).html(can.view('multiSelectTemplate',this.getMap()));
    },

    getMap : function() {
        return new can.Map({
            selectedOptions : ['option1','option2'],

            options : [{
                display :'Option 1',
                value :'option1'
            },
            {
                display :'Option 2',
                value :'option2'
            },
            {
                display :'Option 3',
                value :'option3'
            },
            {
                display :'Option 4',
                value :'option4'
            },
            {
                display :'Option 5',
                value :'option5'
            }]
        });
    }
});

$(function(){    
    selectControlInst = new selectControl('.selectContainer');
});

Mustache/HTML

<script id="multiSelectTemplate" type="text/mustache">
    <select class="multipleSelect" can-value="selectedOptions" multiple="multiple" size="5">
        {{#options}}
            <option value="{{value}}">{{display}}</option>
        {{/options}}
    </select>
    <br/>
    <br/>
    <select class="multipleSelect" can-value="selectedOptions" multiple="multiple" size="5">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
        <option value="option5">Option 5</option>
    </select>
</script>

Is there a way I can work around this situation?

0

There are 0 best solutions below