ObservableArray child observable change monitoring

Consider this jsfiddle.

I can't think of a way to ensure that if row one in the above example has already been selected in the dropdown that the next row would be prevented from selecting the same value.

I think that my problem here is that when the dropdown click event fires, the subscriber does not monitor this change when the开发者_如何学JAVA child value has changed. Anyone able to assist?

viewModel.actualMetrics.subscribe(function(newValue) {
    if (newValue) {
        $.each(viewModel.actualMetrics(), function(n, item) {
            if (item.MetricTypeId() == newValue.MetricTypeId)
                alert("already selected this Metric");
        });
    }

Here is a basic sample of one way to do what you want: http://jsfiddle.net/rniemeyer/3cpUp/

Here is your sample with it: http://jsfiddle.net/rniemeyer/8bQmq/

The basic idea is that you have your list of choices, then you create a dependentObservable that is an index of the currently used choices. This saves some looping through the current choices when building each rows options. This index could be an object or an array. I used an object, but you could use an array as well with the id as the index.

Then, on each item, you could have a dependentObservable to store the filtered choices for that item. However, I used a function instead, because it does not seem like a property that is really important to the view model and bindings are implemented using dependentObservables, so you get the same effect without having the choices show up when you send it toJSON. The function loops through all of the choices and includes only the choices that do not appear on another line by checking its own value and the index.