knockout.js: 如何使依赖级联下拉列表无条件可见？

Question

Knockout入门，我一直在玩http://knockoutjs.com/examples/cartEditor.html找到的模式。我有级联 select 菜单，其中第二个选项取决于第一个的状态——目前没问题。但无论我做什么，我都没有想出一种方法来改变开箱即用的行为，即第二个元素是不可见的——我想没有渲染——直到第一个元素有一个真实的值（除非删除 optionsCaption 并在我的数据顶部填充一个空记录——更多内容见下文。）标记：

<div id="test" class="border">
    <div class="form-row form-group">
        <label class="col-form-label col-md-3  text-right pr-2">
            language
        </label>
        <div class="col-md-9">
            <select class="form-control" name="language"
            data-bind="options: roster,
                optionsText: 'language',
                optionsCaption: '',
                value: language">
            </select>
        </div>
    </div>
    <div class="form-row form-group">
        <label class="col-form-label col-md-3 text-right pr-2">
            interpreter
        </label>
        <div class="col-md-9" data-bind="with: language">
            <select class="form-control" name="interpreter"
            data-bind="options: interpreters,
                optionsText : 'name',
                optionsCaption: '',
                value: $parent.interpreter"
            </select>
        </div>
    </div>
</div>

代码：

function Thing() {
    var self = this;
    self.language = ko.observable();
    self.interpreter = ko.observable();
    self.language.subscribe(function() {
        self.interpreter(undefined);
   });
};
ko.applyBindings(new Thing());

我的示例数据：

roster = [
    {   "language": "Spanish",
        "interpreters": [
            {"name"  : "Paula"},
            {"name"  : "David"},
            {"name"  : "Humberto"},
            {"name"  : "Erika"},
            {"name"  : "Francisco"},
        ]
    },
    {"language":"Russian",
     "interpreters":[{"name":"Yana"},{"name":"Boris"}]
    },
    {"language":"Foochow",
     "interpreters":[{"name":"Lily"},{"name":"Patsy"}]
    },
    /* etc */

现在，我确实发现我可以解决这个问题并通过将

{ "language":"", "interpreters":[] }

在我的 roster 数据结构的前面，这就是我想我会做的，除非你们中的一个 cognoscenti 能告诉我更优雅的方式，我我在俯瞰。

Answer 1

在使用了 Knockout 和 Vuejs 之后，我发现 Vuejs 更容易使用。淘汰赛有点过时，不再受到任何人或团体的支持。

话虽如此，这就是我解决您的问题的方法。这里的评论指的是 link 你提供的不是你的代码，所以我可以构建我自己的测试用例。

我的工作样本在 http://jsbin.com/gediwal/edit?js,console,output

我从两个 select 框中删除了 optionsCaption。
向数据中添加了以下项目（请注意，这必须是数组中的第一项）： {"products":{"name":"Waiting", "price":0}, "name":"Select..."},
我将 disable:isDisabled 添加到第二个 select 框中，因为我希望在第一个 select 中没有任何内容时禁用它 select ]box.
添加了self.isDisabled = ko.observable(true);到推车模型

更改了订阅以检查新值。如果是 select 选项，第二个会被锁定。

function formatCurrency(value) {
    return "$" + value.toFixed(2);
}

var CartLine = function() {
    var self = this;

    // added this to enable/disable second select
    self.isDisabled = ko.observable(true);

    self.category = ko.observable();
    self.product = ko.observable();
    self.quantity = ko.observable(1);
    self.subtotal = ko.computed(function() {
        return self.product() ? self.product().price * parseInt("0" + self.quantity(), 10) : 0;
    });

    // Whenever the category changes, reset the product selection
    // added the val argument. Its the new value whenever category lchanges.
    self.category.subscribe(function(val) {
        self.product(undefined);
        // check to see if it should be disabled or not.
        self.isDisabled("Select..." == val.name);
    });
};

var Cart = function() {
    // Stores an array of lines, and from these, can work out the grandTotal
    var self = this;
    self.lines = ko.observableArray([new CartLine()]); // Put one line in by default
    self.grandTotal = ko.computed(function() {
        var total = 0;
        $.each(self.lines(), function() { total += this.subtotal() })
        return total;
    });

    // Operations
    self.addLine = function() { self.lines.push(new CartLine()) };
    self.removeLine = function(line) { self.lines.remove(line) };
    self.save = function() {
        var dataToSave = $.map(self.lines(), function(line) {
            return line.product() ? {
                productName: line.product().name,
                quantity: line.quantity()
            } : undefined
        });
        alert("Could now send this to server: " + JSON.stringify(dataToSave));
    };
};

knockout.js: 如何使依赖级联下拉列表无条件可见？

knockout.js: how to make a dependent cascading dropdown unconditionally visible?

knockout-3.0