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

Question

从淘汰赛开始，我一直在使用在http://knockoutjs.com/examples/cartEditor.html找到的模式。我有层叠的选择菜单，第二个菜单的选项取决于第一个菜单的状态--到目前为止没有问题。但无论我做什么，我都没有想出一种改变开箱即用的行为的方法，在第一个元素具有真正的ish值之前，第二个元素是不可见的--我可以想象它不是呈现出来的--直到第一个元素有了真正的ish值(除了取出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数据结构的前面，这就是我想要做的，除非你们中的一个人可以向我展示我忽略的更优雅的方式。

Answer 1

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

话虽如此，以下是我如何处理您的问题。这里的注释引用的是您提供的链接，而不是您的代码，因此我可以构建自己的测试用例。

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

1. 我从两个复选框中删除了optionsCaption。
2. 在数据中添加以下项(注意，这必须是数组中的第一项)：{“产品”：{“名称”：“等待”，“价格”：0}，“名称”：“选择.”}，
3. 我在第二个选择框中添加了禁用:isDis师表，因为我希望在第一个选择框中没有选择任何内容时禁用它。
4. 将self.isDisabled = ko.observable(true)；添加到cartline模型中
5. 更改订阅以检查新值。如果是select选项，则第二个选项将被锁定。 函数formatCurrency(值){返回"$“+ value.toFixed(2)；} var CartLine =函数(){ var self = this；//添加此函数以启用/禁用第二选择self.isDisabled =ko.observable(真)；self.category = ko.observable()；self.product = ko.observable()；self.quantity = ko.observable(1)；self.subtotal =ko.computed(函数(){返回self.product() )？self.product().price * parseInt("0“+ self.quantity()，10)：0；}；//每当类别更改时，重置产品选择//添加val参数。每当类别发生变化时，它就是新的值。Self.category.subscribe(Val){self.product(未定义)；//检查是否应该禁用它。Self.isDisabled(“Select……”== val.name)；}；}；var Cart = function() { // Stores数组行，从中可以计算出grandTotal var self = this；self.lines =ko.observableArray(新的CartLine())；//默认情况下放入一行self.grandTotal =ko.computed(函数()){ var总计= 0；$.each(self.lines()，函数(){ += this.subtotal() })返回总计；}；//操作self.addLine = function() {self.lines.push(新CartLine()) }；self.removeLine = function(line) { self.lines.remove(line) }；self.save =$.map(){ var dataToSave = $.map(self.lines()，函式(行){返回line.product()？{ productName: line.product().name，quantity: line.quantity() }：未定义})；警告(“现在可以将其发送到服务器：”+JSON.stringify(DataToSave)；}；}；}；