Knockoutjs простой каскадный выбор

Я пытаюсь сделать простой каскадный список со списком, используя нокаут. Мой первый список со списком привязывается к 2 свойствам в модели представления:

BusinessLines в качестве источника для вариантов со списком

SelectedBusinessLine в качестве выбранного элемента в первом поле со списком.

Каждая бизнес-линия имеет набор кластеров.

Второе поле со списком должно привязывать данные к SelectedBusinessLine.Clusters, наблюдаемому для источника параметров поля со списком, и SelectedCluster для выбранного параметра.

Проблема в том, что второе поле со списком вообще не заполняется.

Источник в JsFiddle (в JsFiddle первая привязка тоже не работает, извините, впервые)

JavaScript

 var mainViewModel = null;

    $(document).ready(function() {

        var mainViewModelData = <%= JsonConvert.SerializeObject(NewRequestViewModel) %>;

        mainViewModel = ko.mapping.fromJS(mainViewModelData);

        ko.applyBindings(mainViewModel);

    });

HTML

<div>
    <table>
        <tr>
            <td>
                Business Line
            </td>
            <td>
                <select data-bind="options: BusinessLines,
                                   optionsText: 'Title',
                                   value: SelectedBusinessLine,
                                   optionsCaption: 'Select Business Line..'">
                </select>
            </td>
        </tr>
        <tr>
            <td>
                Cluster
            </td>
            <td>
                <select data-bind="options: SelectedBusinessLine.Clusters,
                                   optionsText: 'Title',
                                   value: SelectedCluster,
                                   optionsCaption: 'Select Cluster..'">
                </select>
            </td>
        </tr> 
    </table>
</div>

Обновление:

Второе решение (без вычисляемых реквизитов)

<select data-bind="options: SelectedBusinessLine() ? SelectedBusinessLine().Clusters() : [],
                                   optionsText: 'Title',
                                   value: SelectedCluster,
                                   optionsCaption: 'Select Cluster..'">
                </select>

cascadingdropdown knockout.js
person Narcis    schedule 08.07.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вот рабочая версия:

http://jsfiddle.net/x2qMg/4/

Ваша скрипка не работала (вообще), потому что вы не включили ссылку Knockout Mapping JS (плагин сопоставления не является частью основного Knockout JS) — см. область «Управление ресурсами» на левой боковой панели.

Вы увидите, что самым большим изменением, которое я сделал, было использование привязки with для рендеринга кластеров только при выборе направления бизнеса. Также обратите внимание, что мне пришлось использовать $root.SelectedCluster, иначе он не будет найден в контексте Selected Business Line, созданном with.

person John Earles    schedule 08.07.2012
comment
Большое Вам спасибо. И если я хочу, чтобы поле со списком кластеров всегда было видимым, но без элементов, если ничего не выбрано, поле со списком BuisnessLines (сначала), что мне следует изменить? - person Narcis; 09.07.2012
comment
В этом случае вам придется использовать вычисляемую наблюдаемую. Вычисляемое свойство зависит от SelectedBusinessLine, поэтому всякий раз, когда это свойство изменяется, Knockout будет пересчитывать доступные кластеры. Примерно так: jsfiddle.net/x2qMg/6 - person John Earles; 09.07.2012
comment
Приятно спасибо. Я думаю, было бы чище, если бы вы могли установить прямую привязку к SelectedBusinessLine.Clusters, поэтому, когда SelectedBusinessLine изменит kncokout, также будут реализованы кластеры. Я думаю, я больше привык к системе привязки WPF. - person Narcis; 09.07.2012
comment
Если у вас не выбрано направление бизнеса, SelectedBusinessLine.Clusters не существует. Вы получите ошибки JavaScript. Вот почему мой первый пример сделал то, что сделал, используя привязку with, чтобы вторичный выбор отображался только при установке SelectedBusinessLine. Используя вычисляемое свойство, я обхожу это, возвращая пустой массив, если SelectedBusinessLine не установлен. - person John Earles; 09.07.2012
comment
Хорошо, но когда есть ошибки js с привязкой, привязка должна завершиться автоматически, в тот момент, когда выбрана бизнес-линия, привязка должна переоценить и завершиться успешно. Мне любопытно, могу ли я реализовать это с помощью пользовательской привязки, что-то из обоих, но без скрытия. - person Narcis; 09.07.2012