1

皆さんおはようございます。私はノックアウト.jsで少し遊んでいます.いくつかのドロップダウンでカスケードフィルタリングをしようとしています. 3つのテーブルがあるとしましょう。

グループ -> サブグループ -> セクター

グループが選択されると、サブグループのドロップダウンがフィルター処理され、サブグループのドロップダウンが選択されると、セクターがサブグループの値でフィルター処理されます。あなたは絵を手に入れます。

私はすでにこのコードを持っています。

HTML:

<div class="span3">
 <label for="grupos">Grupo<i clasS="icon-search"></i></label>
 <select class="span12" id="grupos" data-bind="value:grupo">
    <option value="1" >A</option>
    <option value="2" >B</option>
    <option value="3" >C</option>
 </select>
</div>
<div class="span3">
  <label for="subgrupos">Subgrupo</label>
  <!-- ko with: grupo -->
  <select class="span12" id="subgrupos" data-bind='options:$parent.subgrupoData,            optionsText: "description", optionsCaption: "Select...", optionsValue: "id", value: $parent.subgrupo'> </select>
   <!-- /ko -->
  </div>
  <div class="span3">
    <label for="secciones">Seccion</label>
 <!-- ko with: subgrupo -->
    <select class="span12" id="secciones" data-bind='options:$parent.seccionData, optionsText: "description", optionsCaption: "Select...", optionsValue: "id", value: $parent.seccion'>
    </select>
    <!-- /ko -->
 </div>

そしてJS：

var Subgroup = function(_id, _description) { var self = this; self.id = _id; self.description = _description; };

var Section = function(_id, _description) {
    var self = this;
    self.id = _id;
    self.description = _description;
};


var SearchModel = function() {
    var self = this;
    self.grupo = ko.observable();
    self.subgrupo = ko.observable();
    self.subgrupoData = ko.observableArray([]);

    self.seccion = ko.observable();
    self.seccionData = ko.observableArray([]);

    self.grupo.subscribe(function() {
        $.getJSON("/someurl", {'g':$('#grupos').val()}, function(data) {
            var mappedSg = $.map(data, function(item) { return new Subgroup(item.id, item.description) });
            self.subgrupoData(mappedSg);
        });
        self.seccion(undefined);
    });

    self.subgrupo.subscribe(function() {
        if($('#subgrupos')){
            $.getJSON("/anotherurl", {'sg':$('#subgrupos').val()}, function(data) {
                var mappedSect = $.map(data, function(item) { return new Section(item.id, item.description) });
                self.seccionData(mappedSect);
            });
        }else{
            self.seccion(undefined);
        }
    });
};
ko.applyBindings(new SearchModel());

これで作業は完了しましたが、if ($('#subgrupos')) 検証を記述する必要があります。これは、最初のドロップダウンを変更すると 2 番目が変更され、3 番目が ID なしで検索されるためです。

私の質問は、「with」バインディングを使用した選択がDOMから削除されるのを回避する方法はありますか? 検証には、それを検証する「ノックアウト」方法がありますか?

前もって感謝します

4

2 に答える 2

0

ノックアウト エクステンダーを使用できます。その使用方法に関するドキュメントを参照してください:ノックアウト エクステンダー。そのページを下にスクロールすると、エクステンダーを使用してバリデーターを使用する方法が説明されています。

于 2013-05-31T03:06:17.503 に答える