Save selected object into another Observable Array - KnockoutJS

Question

I'm using KnockoutJS to bind some data but am having problems binding two DOM elements together. I have an Observable Array that is populated with JS objects. I'm trying to have the selected option save its value into another Observable Array which will be used elsewhere. Here is a small snippet of what I have at the moment.

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());

I'm only writing one row here for simplicity but basically there will be 12 more rows. Here is the 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>

The reason why I want to save the selected option into another array is because I'm going to be using that array in other dropdowns with all the selected objects that the user picked. So the Rank property would only need to be entered once and will be linked to the selected team. So what I'm trying to do is have the selected option save a JS object into another array. Is there any way something like this can be done? Or maybe another alternative that will get the same thing accomplished?

Thanks in advance for any help I can get.

EDIT: I've created a modified JSFiddle to get a better visual representation of what I'm trying to do http://jsfiddle.net/VAufX/1/

Answer 1

Give this a shot: Fiddle

The key is in the use of a computed.

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

Also, give this section of Knockout's documentation a read. It seems you might have been using the "optionsValue" binding when you didn't need to.