Knockout.js嵌套和選項綁定刪除從DOM選擇

Question

早上好人。我在knockout.js上玩了一下，我正在嘗試在一些下拉菜單上進行級聯過濾。比方說，我有3個表，

組 - >子羣 - 過濾>部分

，並選擇了組時，該subgruoup下拉，然後在分組下拉選擇通過分組過濾行業值。你得到的照片。

我已經有此代碼。

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：

變種分組=函數（_id，_description）{ 變種自=此; 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()); 

所以我所做的工作，但我寫的，如果（$（「＃subgrupos」））驗證，因爲如果我改變第一個下​​拉，二是改變，因此，第三個是在沒有ID的情況下進行搜索。

我的問題是，有沒有辦法避免從「DOM」中刪除「with」綁定的選擇？驗證是否有一個「敲除」的方式來驗證？

在此先感謝

Answer 1

要回答第一個問題，你可以從JavaScript中移除的jQuery選擇來解決這個問題。您的knockout訂閱處理程序確實接受observable的新值作爲第一個參數。

迴應您的驗證問題，請查看Knockout Validation庫。

下面是修改過的javascript來解決你的第一個問題：

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(newGrupo) { 
     $.getJSON("/someurl", {'g':newGrupo}, 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(newSubGrupo) { 
     if($('#subgrupos')){ 
      $.getJSON("/anotherurl", {'sg':newSubGrupo}, 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()); 

Answer 2

您可以使用淘汰賽擴展..只是看一下關於如何使用該文檔：Knockout Extenders。向下滾動該頁面，他們已經解釋瞭如何使用擴展器使用驗證器。