Question

淘汰赛入门，我一直在玩http://knockoutjs.com/examples/cartEditor.html的模式。我有级联选择菜单，其中第二个选项取决于第一个的状态 - 到目前为止没问题。但无论我做什么，我都没有想办法改变开箱即用的行为，即第二个元素不可见 - 没有渲染，我想 - 直到第一个元素具有真实性 - 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数据结构的前面，除非你们其中一个 cognoscenti 能告诉我更优雅的方式，我想我会做什么俯视。

Answer 1

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

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

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

我从两个选择框中删除了optionsCaption。
在数据中添加了以下项目（请注意，这必须是arry中的第一项）： {“products”：{“name”：“Waiting”，“price”：0}，“name”：“Select ...”}，
我在第二个选择框中添加了禁用：isDisabled，因为我希望在第一个选择框中没有选择任何内容时禁用它。
添加了self.isDisabled = ko.observable（true）;到购物车模型

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

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：如何无条件地看到依赖级联下拉列表？

1 个答案: