4

2 つのドロップダウン列を持つデータ バインド テーブルを作成しようとしています。ただし、右側のドロップダウンで使用できるオプションは、左側のドロップダウンで選択した内容によって異なります。たとえば、DropdownA州のDropdownBリストと、その州の都市のリストがあるとします。私のテンプレートは次のようになります。

<!-- ko foreach: MeasurementInfoPlans -->
<tr>
   <td><select id="DropdownA" data-bind="options: $root.AllStates, optionsValue: 'State', optionsText: 'Name', value: StateId"></select></td>
   <td><select id="DropdownB" data-bind="options: $root.AllCities, optionsValue: 'City', optionsText: 'Name', value: CityId"></select></td>
</tr>
<!-- /ko -->

現在、 のDropdownBすべてのアイテムが表示され$root.AllCitiesます。ただし、で選択された値のプロパティを持つ都市のみを表示したいと考えています。StateDropdownA

計算されたオブザーバブルを使用して依存ドロップダウンを定義する方法に関するさまざまな例をオンラインで見つけましたが、これらの例では、単一のソース ドロップダウン (State など) しかないことを前提としています。私の場合、グリッド内に任意の数のドロップダウンペアを作成する必要があります。これを行う方法の例はありますか?

4

2 に答える 2

6

都市をstateオブジェクトに配置し、それらをcomputed行アイテムとして追跡します。これは、州の選択で観察できるためです。これがフィドルです

html：

<select data-bind="options: $parent.states,
                   optionsText: 'name',
                   value: state"></select>
<select data-bind="options: cities, value: city"></select>

js：

    self.state = ko.observable("");
    self.city = ko.observable("");
    self.cities = ko.computed(function(){
        if(self.state() == "" || self.state().cities == undefined)
            return [];
        return self.state().cities;
    });
于 2013-02-26T00:26:22.410 に答える
1

2つの解決策が頭に浮かびます：

  • viewmodelの observableArray を購読し、 それが変更されるたびにDropdownAの observableArray 内の都市の範囲を置き換えますDropdownB
  • オブザーバブル データ コンテキストを使用する: オプション ソースとしてオブザーバブルを使用して、必要に応じて変更できるようにします。最初のものと同じようにサブスクライブしDropdownA、都市コレクションが変更されるたびに全体を置き換えます

私は 2 番目のものを選びます。それはよりクリーンだからです。

ここに私があなたのために作ったjsfiddleのサンプルがあります。

HTML:

<select data-bind="options: dropdownA, value: dropdownAValue">
</select>
<select data-bind="options: dropdownB">
</select>

J:

var viewModel = function() {
    var _this = this,
        dataSource1,
        dataSource2;

    dataSource1 = ["Hello"];
    dataSource2 = ["World"];

    _this.dropdownA = ko.observableArray(["A", "B"]);
    _this.dropdownB = ko.observable(dataSource1);
    _this.dropdownAValue = ko.observable();

    _this.dropdownAValue.subscribe(function() {
        if (_this.dropdownAValue() == "A") {
            _this.dropdownB(dataSource1);   
        } else {
            _this.dropdownB(dataSource2);   
        }
    });
};

ko.applyBindings(new viewModel());

次に、この概念を複数の行で簡単に使用できます: http://jsfiddle.net/jGRQH/

HTML:

<table data-bind="foreach: rows">
    <tr>
       <td>
            <select data-bind="options: $root.dropdownA, value: dropdownAValue">
            </select>
        </td>
        <td>
            <select data-bind="options: dropdownB">
            </select>
        </td>
    </tr>
</table>

J:

var rowViewModel = function(dataSource1, dataSource2) {
    var _this = this;

    _this.dropdownB = ko.observable(dataSource1);
    _this.dropdownAValue = ko.observable();

    _this.dropdownAValue.subscribe(function() {
        if (_this.dropdownAValue() == "A") {
            _this.dropdownB(dataSource1);   
        } else {
            _this.dropdownB(dataSource2);   
        }
    });
};

var mainViewModel = function() {
    var _this = this,
        dataSource1,
        dataSource2,
        addRow;

    dataSource1 = ["Hello"];
    dataSource2 = ["World"];

    addRow = function () {
        _this.rows().push(new rowViewModel(dataSource1, dataSource2));
    };

    _this.rows = ko.observableArray();

    _this.dropdownA = ko.observableArray(["A", "B"]);

    addRow();
    addRow();
    addRow();
};

ko.applyBindings(new mainViewModel());
于 2013-02-26T00:17:01.610 に答える