Привязать выбранный элемент к диалогу

Question

Я пытаюсь показать данные из элемента таблицы в элементах управления диалогового окна. Вот Плункер: https://plnkr.co/edit/MPHT17Hf4xNj3ZuuNXMd?p=preview

А вот код, который специально получает данные элемента и устанавливает их в 'detailItem' JSONModel:

onItemPress: function(evt) {
    var me = this;
    var view = me.getView();
    var item = evt.getSource().getBindingContext('list').getObject();
    view.getModel('detailItem').setData(item);
    var dlg = new sap.m.Dialog({
        title: 'Edit Item',
        type: 'Message',
        content: [
            new sap.m.VBox({
                items: [
                    new sap.m.Label({
                        text: 'Section'
                    }),
                    new sap.m.Input({
                        value: '{detailItem>sectionId}'
                    }),
                    new sap.m.Label({
                        text: 'Cost'
                    }),
                    new sap.m.Input({
                        value: '{detailItem>costId}'
                    })
                ]
            })
        ],
        beginButton: new sap.m.Button({
            text: 'Ok',
            press: function() {
                dlg.close();
            }
        }),
        endButton: new sap.m.Button({
            text: 'Cancel',
            press: function() {
                dlg.close();
            }
        }),
        afterClose: function() {
            dlg.destroy();
        }
    }).open();
}

Plunker довольно прост. По сути, я хочу выбрать элемент в таблице, открыть диалоговое окно с парой полей ввода, позволяющих редактировать данные. Я пытаюсь привязать поля ввода к выбранному элементу, установив данные для 'detailItem' модель и пытается связать value свойство полей ввода для соответствующего элемента данных.

Answer 1

Вот рабочий пример (разветвленный от вашего): https://embed.plnkr.co/ictpCHG0R3H3jtsCmHKW/?show=App.controller.js,preview.

Подход с относительным синтаксисом связывания был в порядке. Однако нам не нужна вторая модель, поэтому замените {detailItem> с {list> в вашем диалоге. Затем мы можем установить данный контекст привязки (из выбранного элемента) для диалога, чтобы можно было разрешить относительные привязки внутри диалога:

dialog.setBindingContext(item.getBindingContext("list"), "list")

Но одного этого недостаточно. Диалоговое окно по-прежнему не будет отображать выбранные данные, поскольку оно не является потомком представления и, следовательно, "list" модель ему неизвестна.

Одним из способов решения этой проблемы является добавление диалога к dependents агрегирование представления или любого другого элемента управления в представлении. Таким образом, модель будет распространена в диалоге. И как бонусный эффект, он будет уничтожен вместе, когда основной контроль будет уничтожен:

Специальная агрегация dependents связан с управлением жизненным циклом и привязкой данных, но не отображается автоматически и может использоваться для всплывающих окон или других зависимых элементов управления или элементов. Это позволяет определять всплывающие элементы управления в декларативных представлениях и позволяет им распространять информацию о модели и контексте. [SRC]

Поскольку все элементы управления обеспечивают агрегацию <dependents>Вы также можете переместить определение диалога из контроллера в представление.