Set initial knockout select value

Question

Using the following html, how can I set the select value to an observable, so I can subscribe to the before and after changes. The JustCityGateBasisId (currently set as value:) is a value within the foreach (justCityGatesListPush). I want to use that value, so each select that gets created is initialized with the correct value. This works. Although I have set the JustCityGateBasisId to an observable, I believe Knockout will not fire any subscriptions on the value, so I can't get the before and after values. I have added an event, but that will only provide the before value or after value not both. If I use an observable as the value (not the value that exists in the foreach), I can't initialize the value with the foreach values as it creates the selects.

What I would like to do is set the value to an observable and then as the foreach executes be able to update the observable with the JustCityGateBasisId value. The span value gets the correct value at bind time. I was hoping to be able to get both values when the event fires, but it looks like it isn't possible.

<table>
        <tr data-bind="foreach: justCityGatesListPush">

            <td class="citygatebasisList">
                <select id="cityGate" data-bind="options: CityGates,
                       optionsText: 'Name',
                       optionsValue: 'Id',
                       value: JustCityGateBasisId,
                       event: { change: selectionLastChanged }"></select>
            </td>

            <td class="CityGate">
                <span data-bind="text: JustCityGateBasisId" />
            </td>

        </tr>
    </table>

<div> <table> <tr data-bind="foreach: justCityGatesListPush"> <td class="citygatebasisList"> <select id="selectme" data-bind="options: CityGates, optionsText: 'Name', optionsValue: 'Id', value: JustCityGateBasisId, event: { change: selectionLastChanged }"></select> </td> <td class="CityGate"> <span data-bind="text: JustCityGateBasisId" /> </td> </tr> </table> </div> — user3779338
It sounds like you are trying to implement something that knockout will do for you. If JustCityGateBasisId contains a value that matches the Id property of an entry within CityGates it will select that option. If that is not occurring, then there is another problem. — Origineil

Wayne Ellery Wayne Ellery · Accepted Answer · 2014-06-26T13:09:40

this.myObservable = ko.observable();

this.myObservable.subscribe(function(previousValue){
    console.log('oldvalue: ' + previousValue);
}, this, "beforeChange");

this.myObservable.subscribe(function(newValue){
    console.log('newValue: ' + newValue)
});

http://jsfiddle.net/pAbZn/

Set initial knockout select value

1 Answers