jquery - 通过 select 更新变量

Question

我非常了解 Knockoutjs，我正在尝试在输入选择上执行服务调用。

我的对象看起来像这样:

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

通过调用以下内容来填充选择框:

function GetAvailableTeams() {

    var jqxhr =
    $.getJSON('http://localhost/Service.svc/GetTeamsAll',
    function (data) {
        teamViewModel.clearTeams();
        $.each(data.GetTeamsAllResult, 
        function (key, val) {
            teamViewModel.addTeam(val.TeamId, val.TeamName, true);
        });
        ko.applyBindings(teamViewModel, document.getElementById("teamNameLabel"));
    })
}

该函数在页面加载时调用并像这样引用:

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

当选择 select 语句上的选项时，如何更新全局变量 TeamId？

编辑:

function GetAllUsersByTeam(){

var url = 'http://localhost/Service.svc/GetUsersByTeam/'+TeamId;

        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"));
        })
    }

Answer 1

无需使用全局变量。您可以将 selectedTeam 可观察对象添加到您的 View 模型中，它代表所选的选项:

var teamViewModel = {
    teams: ko.observableArray([]),
    selectedTeam: ko.observable(),
    // ...
}

然后，bind the options' value 到 selectedTeam，即:

<select data-bind="options: teams,  optionsText: 'name', value: selectedTeam">
</select>

最后，要访问所选选项的 id，只需使用 teamViewModel.selectedTeam().id。

这是一个 DEMO 。