выпадающее каскадное выпадающее меню

У меня есть два раскрывающихся списка, один из которых зависит от другого (каскадный). Выбор в «Основных категориях» определяет элементы для «Подкатегорий». Кроме того, выбор в «MainCategories» также определяет видимость строки таблицы. Вот что я пробовал:

<table>
    <tbody data-bind="foreach: contacts">
        <tr>
            <td>MainCategories:
                <select data-bind='options: MyCategories, value: mycategory, optionsText: "Type", optionsValue: "Type",optionsCaption: "Select..."'></select>
            </td>
            <td>
                <!-- ko with: mycategory -->SubCategories:
                <select data-bind='options: Categories, optionsText: "Category", optionsCaption: "Select...", value: $parent.product'></select>
                <!-- /ko -->
            </td>
        </tr>
        <tr data-bind="visible:mycategory()=='Type1'">
            <td>I am visible</td>
        </tr>
    </tbody>
</table>

<script type = "text/javascript" >
    var MyCategories = [{
        "Categories": [{
            "Category": "Category1"
        }, {
            "Category": "Category2"
        }],
        "Type": "Type1"
    }, {
        "Categories": [{
            "Category": "Category3"
        }, {
            "Category": "Category4"
        }],
        "Type": "Type2"
    }];
    var initialData = [{
        category: "Mobile",
        product: "Nokia"
    }];

    var ContactsModel = function (contacts) {
        var self = this;
        self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function (contact) {
            return {
                mycategory: ko.observable(contact.category),
                product: ko.observable(contact.product)
            };
        }));

    };

    ko.applyBindings(new ContactsModel(initialData));
</script>

Если я удалю optionsValue: «Тип», то «Подкатегории» получат правильные элементы. Но видимость строки таблицы не работает должным образом. Если у меня есть optionsValue: "Тип", то "Подкатегории" не заполняются. А также, когда я меняю параметры «MainCategories» 1 или 2 раза, то нормально работает только видимость.

Пожалуйста, помогите мне найти, что я делаю неправильно здесь. Спасибо,


cascadingdropdown knockout.js
person SKB    schedule 01.08.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я прочитал ваш вопрос, и у меня есть ощущение, что это ответит на него, если не решить его достаточно, чтобы вы могли его применить -

*Проблема * –

Вам нужно иметь каскадное раскрывающееся меню, используя Knockout, чтобы выбрать значение и установить наблюдаемое значение равным выбранному объекту дочернего элемента.

*Решение * –

Используйте вычисление, чтобы сделать второй раскрывающийся список зависимым от первого. Пример -

var selectedParent = ko.observable();

var parentCategories = ko.observableArray(MyCategories);

var childCategories = ko.computed(function () {
    if (!selectedParent()) { return new Array(); }
    var childArray = [];
    // get the values you want for the child here
    return childArray;
});

Добавляя if (!selectedParent()) вы делаете дочерние категории зависимыми от selectedParent. Всякий раз, когда выбор изменяется, дочерние категории будут автоматически обновляться.

Тогда ваш взгляд может быть примерно таким:

<td>MainCategories:
                <select data-bind='options: parentCategories, value: selectedParent, optionsText: "Type", optionsValue: "Type",optionsCaption: "Select..."'></select>
            </td>
            <td> SubCategories:
                <select data-bind='options: childCategories, optionsText: "Category", optionsCaption: "Select...", value: $parent.product'></select>
                <!-- /ko -->
            </td>
person PW Kad    schedule 01.08.2013