将所选对象保存到另一个可观察数组-KnockoutJS

Question

我正在使用KnockoutJS绑定一些数据，但是在将两个DOM元素绑定在一起时遇到问题。 我有一个用JS对象填充的Observable Array。 我试图让所选选项将其值保存到另一个将在其他地方使用的Observable Array中。 这是我目前所拥有的一小段代码。

function BracketsViewModel() {
    var self = this;
    self.AfcTeams = ko.observableArray([]);
    self.AfcSelectedDivision = ko.observableArray([]);

    // Initially creates array that will hold selected values from the dropdowns
    for (var i = 0; i <= 3; i++) {
        self.AfcSelectedDivision.push(new TeamModel(null));
    }

    // This gets a JSON string and saves into array
    $.getJSON('/Brackets/GetAFCTeams', function (data) {
        $.each(data, function (i, item) {
            self.AfcTeams.push(new TeamModel(item));
        });
   });
}

// JS Object
function TeamModel(data) {
    if (data) {
        this.Tri = data.Tricode;
        this.Name = data.DisplayName;
    } else {
        this.Tri = "";
        this.Name = "";
    }
    this.Rank = 0;
 }

 ko.applyBindings(new BracketsViewModel());

为了简单起见，我在这里只写一行，但是基本上会有12行。 这是HTML。

<div class="row">
    <div class="col-sm-3" style="padding-right: 1px">
        <input class="form-control" type="number" data-bind="value: AfcSelectedDivision[0].Rank" />
    </div>
    <div class="col-sm-9" style="padding-left: 1px">
        <select class="form-control" data-bind="options: AfcTeams, optionsText: 'Name', optionsValue: 'Tri', optionsCaption: '-- Team --', value: AfcSelectedDivision[0]"></select>
    </div>
 </div>

之所以要将选定的选项保存到另一个数组中，是因为我将在其他下拉菜单中将该数组与用户选择的所有选定对象一起使用。 因此，排名属性仅需要输入一次，并将链接到所选团队。 所以我想做的是让选定的选项将JS对象保存到另一个数组中。 有什么办法可以做到吗？ 还是可以完成相同任务的另一种选择？

在此先感谢您能获得的任何帮助。

编辑：我创建了一个修改过的JSFiddle，以获得我正在尝试做的更好的视觉表示http://jsfiddle.net/VAufX/1/

Answer 1

试一下： 小提琴

关键是在使用计算方式。

self.AfcSelectedTeams = [];

for (var i = 0; i <= 3; i++) {
    self.AfcSelectedTeams.push(ko.observable());
}

self.AfcSelectedDivision = ko.computed(function() {
    var tmp = [];
    ko.utils.arrayForEach(self.AfcSelectedTeams, function(team) {
        if (team()) {
            tmp.push(team());
        }
    });

    return tmp;
});

另外，请阅读Knockout文档的这一部分 。 似乎您不需要时可能一直在使用“ optionsValue”绑定。