Return to docs home page

selectListObservable

Type: knockout component

Encapsulates select list handling for INameValue[]

Initialize

In init() function

me.application.loadResources([
'@pnut/selectListObservable'
], () => {

});

Constructor

me.taskEditForm.intervalType= new Peanut.selectListObservable(
    // handler - null if no handler
    me.onIntervalTypeChange,  
    // selection array
    [
          {name: 'On demand', id: 1},
          {name: 'Regular interval', id: 2},
          {name: 'Weeky', id: 3},
          {name: 'Daily', id: 4},
          {name: 'Fixed time', id: 5}
        ],
    // initial default value 
    1 );

Handler

        onIntervalTypeChange = (type: ILookupItem) => {
            let me = this;
            me.taskEditForm.time('');
        };

HTML in view example

<label for="document-types">Document type</label>
<select class="form-control form-select"  id="document-types"
   data-bind = "options: documentType.options, optionsText:'Name', value:documentType.selected"
></select>

for selectlist with handlers you need to call subscrible and unsubscribe

this.taskEditForm.intervalType.unsubscribe();
if (value) {
    this.taskEditForm.intervalType.setValue(value);
}
else {
    this.taskEditForm.intervalType.setDefaultValue();
}
this.taskEditForm.intervalType.subscribe();

If list is of type ILookupItem[] use assignLookupList:

me.sessiontypeSelector.assignLookupList(response.sessionTypes);