Question

在此Knockout示例中遵循示例3：http://knockoutjs.com/documentation/options-binding.html

我有一个运动对象列表，我通过下拉菜单选择。每个运动对象都有一个类别列表，我根据选择的运动进行迭代。这目前有效。

现在，我需要获取当前所选运动的名称，以便我可以在CRUD操作中使用它。在下面的示例中，我尝试将其存储在隐藏字段中，该字段无法按预期工作，将字段中的value-attribute保留为空。

那么，如何从下拉列表中的选定值中获取名称（或模型中的任何其他可观察值）？

下面的代码显示了我使用的模型和html：

    <select id="categorySelector" class="form-control" data-bind="options: Sports, optionsText: 'Name', value: SelectedSport"></select>
    <table  data-bind="foreach: SelectedSport">
        <tbody data-bind="foreach: Categories">
            <tr data-bind="attr: { 'data-name': Name }">
                <td data-bind="text: Name"></td>
            </tr>
        </tbody>
    </table>
    <input type="hidden" data-bind="value: $root.SelectedSport.Name" />
    <span data-bind="text: SelectedSport.Name"></span>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
    <script>
        var CategoryModel = function (name) {
            var self = this;
            self.Name = ko.observable(name);
        };
        var SportModel = function (name) {
            var self = this;
            self.Name = ko.observable(name);
        };
        var ViewModel = function () {
            var self = this;
            self.Sports = ko.observableArray();
            self.SelectedSport = ko.observable();

            self.GetSports = function () {
                $.getJSON('data.json', function (data) {
                    $.each(data, function (sportIndex, sportValue) {
                        if (sportValue.hasOwnProperty('name')) {
                            var newSport = new SportModel(sportValue.name);
                            console.log(sportValue.name);
                            $.each(sportValue.categories, function (categoryIndex, categoryValue) {
                                if (categoryValue.hasOwnProperty('name')) {
                                    newSport.Categories.push(new CategoryModel(categoryValue.name));
                                    console.log('--' + categoryValue.name);
                                }
                            });
                            self.Sports.push(newSport);
                        }
                    });
                })
                .fail(function () {
                    console.log("Failed to load and/or parse bikeData.json");
                });
            };
        };
        var viewModel = new ViewModel();
        ko.applyBindings(viewModel);
        viewModel.GetSports();
    </script>

Json文件：

[
    {
        "name": "Archery",
        "categories": [
            { "name": "Världsmästerskap" },
            { "name": "Vintermästerskap" }
        ]
    },
    {
        "name": "Bike",
        "categories": [
            { "name": "Världsmästerskap" },
            { "name": "Europamästerskap" }
        ]
    }
]

Answer 1

我找到了答案：您需要检查是否确实选择了值，如果没有，请插入默认值，如下所示：

<input type="hidden" data-bind="value: SelectedSport() ? SelectedSport().Name : 'unknown'" />

Knockout网站上的示例显示了这一点。

Knockout：绑定到select-observable不返回任何内容

1 个答案: