knockout.js - ノックアウト js を使用してコントローラーから渡される選択オプションのフィルタリング

Question

こんばんは。ノックアウト.jsについて質問があります。テーブル フィルタリング フォームを使用しています。2 つのドロップダウン、1 つの親と 1 つの子があります。テーブルは、ドロップダウンの 1 つまたは両方によってフィルター処理されます。しかし、最初のドロップダウンを変更すると、2 番目のドロップダウンは ajax 呼び出しによってフィルタリングされます。問題は、ページが html にロードされるときに 2 つのドロップダウンを設定する必要があることです。再開します。私がやろうとしているのは、入力されたドロップダウンから既存のオプションをフィルタリングまたは削除し、フィルタリングされたオプションで埋めることです。

これまでのコード:

HTML (Blade テンプレート、HTML のレンダリング、編集済み: 値は実際の値ではありません。その一部を入れるだけです)

    <div class="span3">
        <div class="control-group">
            <label class="control-label">messages.form_elemento_dependencia:</label>
            <select name="f_dependencia" data-bind="value: dependencia" id="f_dependencia" class="span12 campos_busqueda_bienes">
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
            </select>
         </div>
     </div>

<div class="span3">
    <div class="control-group">
        <label class="control-label">messages.form_elemento_coordinacion:</label>
        <select id="options:coordinacionData, optionsText: "description",optionsCaption: "Seleccione", optionsValue: "id", value: coordinacion" class="span12 campos_busqueda_bienes" name="f_coordinacion">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
        </select>
     </div>
</div>

JS (私がまだ見つけていないのは、調整データ配列に何かが欠けていることを知っています)

var ViewModel = function() {
            var self = this;
            self.dependencia = ko.observable();
            self.coordinacion = ko.observable();
            self.descripcion = ko.observable();
            self.dt = _sitiosDt;

            self.coordinacionData = ko.observableArray([]);

            self.bienes_t = ko.observableArray([]);

            self._filtra_dt = function(){
                _sitiosDt.fnDraw();
            };

            self.filtra_dt_click = function(data, event){
                self._filtra_dt();
            };

            self.filtra_dt = function(data, event){
                if(event.keyCode == 13){
                    self._filtra_dt();
                }
                return true;
            };

            self.limpia_campo_busqueda = function(){
                self.dependencia('');
                self.descripcion('');
            };

            self.dependencia.subscribe(function(newDependencia) {
                if(newDependencia){
                    $.getJSON("/coordinacionesjson", {'d':newDependencia}, function(data) {
                        var mappedData = $.map(data, function(item) { return new Item(item.id, item.description) });
                        self.coordinacionData(mappedData);
                    });
                    self.coordinacion('');
                }
            });



        };
        my = {viewModel : new ViewModel(_sitiosDt)};
        ko.applyBindings(my.viewModel);