与选项绑定嵌套的Knockout.js从DOM中删除select

大家早上好。我正在玩knockout.js，我正在尝试对几个下拉列表进行级联过滤。假设我有3张桌子

组->子组->扇区

选择“组”时，将过滤“子组”下拉列表，然后选择“子组”下拉列表时，将按“子组”值过滤扇区。你明白了

我已经有这个密码了

HTMl:

我已经完成了工作，但是我必须编写if$'subgrupos'验证，因为如果我更改第一个下拉列表，第二个下拉列表将被更改，因此第三个将在没有id的情况下进行搜索

我的问题是，有没有一种方法可以避免将带有with绑定的SELECT从DOM中删除？验证是否有一种淘汰的方法来验证这一点

---

提前感谢您回答第一个问题，您可以从javascript中删除jquery选择器来解决问题。您的knockout-subscribe处理程序确实接受observable的新值作为第一个参数

为了回答您的验证问题，请查看库

以下是解决第一个问题的修订版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());

---

要回答第一个问题，可以从javascript中删除jquery选择器来解决问题。您的knockout-subscribe处理程序确实接受observable的新值作为第一个参数

为了回答您的验证问题，请查看库

以下是解决第一个问题的修订版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());

---

您可以使用敲除扩展器。。只要看看关于如何使用它的文档：。向下滚动该页面，他们已经解释了如何使用扩展器使用验证器

您可以使用敲除扩展器。。只要看看关于如何使用它的文档：。向下滚动该页面，他们已经解释了如何使用扩展器使用验证器

假设敲除验证库是使用扩展器构建的，并且还包含许多预定义的验证规则，那么这将是一个更好的选择。假设敲除验证库是使用扩展器构建的，并且还包含许多预定义的验证规则，那么这将是一个更好的选择。

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());