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。向下滚动该页面，他们已经解释了如何使用扩展器使用验证器。