javascript - ノックアウト - リンク 2 ドロップダウン

Question

ノックアウトを使用して、あるドロップダウンを別のドロップダウンに基づいて入力しようとしていますが、うまくいきません。コード全体はここにあります: http://jsfiddle.net/UHQUX/3/、私のマシンでは最初の 2 つのドロップダウンが生成されますが、2 つ目のドロップダウン (オペレーターから入力する必要があります) は入力されません。これらは 2 つのドロップダウンです。リンクされているはずです：

    <td><select data-bind="options: $parent.ColumnNames, value: SearchCriteria(), optionsValue: 'ColumnName', optionsText: 'ColumnDisplayName', optionsCaption: '', attr: { 'id': 'Search_' +Id() + '__ColumnName', name: 'Search[' + Id() + '].ColumnName' }"></select></td>
    <td><select data-bind="options: Operators, optionsValue: 'OpId', optionsText: 'OpName'"></select></td>

これは、新しいアイテムを作成する関数です:

 function SearchCriteriaItem(id, searchCriteria, links, operators) {
        var self = this;
        self.Id = ko.observable(id);
        self.SearchCriteria = ko.observable(searchCriteria);

        self.Operators = ko.computed(function() {
            if (self.SearchCriteria() !== null) {
                var opId;
                for (var i = 0; i < links.length; i++) {
                    if (links[i].ColumnName == self.SearchCriteria()) {
                        opId = links[i].OpId;
                    }
                }
                var ops = [];
                for (var j = 0; j < operators.length; j++) {
                    if (operators[j].OpId == opId) {
                        op.push(operators[j]);
                    }
                }
                return ops;
            }
            return [];
        });
    }

そして、これはモデル ビューです。

function SearchCriteriaViewModel() {
var self = this;

var data = [];
var columnNames = [];
data.push({
    ColumnName: 'test1',
    ColumnDisplayName: 'Test 1',
    OpId: '1',
    ColumnValuesId: '1'
});
columnNames.push({
    ColumnName: 'test1',
    ColumnDisplayName: 'Test 1'
});
data.push({
    ColumnName: 'test2',
    ColumnDisplayName: 'Test 2',
    OpId: '2',
    ColumnValuesId: '2'
});
columnNames.push({
    ColumnName: 'test2',
    ColumnDisplayName: 'Test 2'
});
self.Links = data;
self.ColumnNames = columnNames;

var operators = [];
operators.push({
    OpId: '1',
    OpName: 'Test Op'
});

var searchCriteria = [];
self.AvailableSearchItems = searchCriteria;
self.Search = ko.observableArray();

for (var i = 0; i < self.AvailableSearchItems.length; i++) {
    var id = GenerateGuid();
    self.Search.push(new SearchCriteriaItem(id, self.AvailableSearchItems[i], self.Links, operators));
}

self.addSearchCriteria = function () {
    id = GenerateGuid();
    self.Search.push(new SearchCriteriaItem(id, self.AvailableSearchItems[0], self.Links, operators));
};

}

また、追加する検索基準の数に関係なく、id は常に同じです。ID は、新しい GUID を返すコントローラーへの ajax 呼び出しによって生成されます。返される値は異なりますが、html はすべての行に対して同じ ID を示しています...

更新: より意味のあるコードに更新しました: http://jsfiddle.net/UHQUX/4/