Question

I have a modelView that looks like that:

var teamViewModel = {
        teams: ko.observableArray([]),
        selectedTeam: ko.observable({id: 1}),
        clearTeams: function(){
            this.teams.removeAll();
        },
        addTeam: function (id, name, isChecked) {
            t = new team(id, name, isChecked);
            this.teams.push(t);
        }
    };

I am referencing it here:

<select id="teamNameLabel" date-theme="f" data-bind="options: teams, optionsText: 'id', value: selectedTeam"></select>

and when I select one of the teams i can hit a button:

<input id="TestButton" type="button" onclick="GetAllUsersByTeam()" value="Show Selected Team" />

and it will call this:

function GetAllUsersByTeam(){

        var url = 'http://localhost/Service.svc/GetUsersByTeam/'+teamViewModel.selectedTeam().id;

        var jqxhr =
        $.getJSON(url,
        function (data) 
        { 
            colleagueViewModel.clearColleagues();
            $.each(data.GetUsersByTeamResult, function (key, val) {
                colleagueViewModel.addColleague(val.FirstName, val.LastName, val.EmailAddress, val.PhoneNumber, val.LocationName, val.CapabilityId, val.CoeId);
            });
            ko.applyBindings(colleagueViewModel, document.getElementById("colleaguesListView"));
        })
    }

This works just like i want it too. But I would like to change so that GetAllUsersByTeam() is called onchange. However:

<select id="teamNameLabel" date-theme="f" onchange="GetAllUsersByTeam()" data-bind="options: teams, optionsText: 'id', value: selectedTeam"></select>

is always 1 ID late. for example when i select 1 it id is 1, 2 id is 1, 3 id is 2…
How can i fix this?

Answer 1

Why not just subscribe to selectedTeam in your model?

this.selectedTeam.subscribe(function(newValue) {
    GetAllUsersByTeam();
});