Динамически создавать элементы пользовательского интерфейса через контроллер и связывать их с указанными c свойствами в модели - PullRequest
Новая
       82

Динамически создавать элементы пользовательского интерфейса через контроллер и связывать их с указанными c свойствами в модели

0 голосов
/ 29 января 2020

Я пытался добавить динамическое c содержимое в мой диалог на основе специфицированного c объекта в моем JSONmodel, который является массивом объектов.

Моя модель имеет следующую структуру, я Я установил это следующим образом (фиктивные данные):

Примечание : У меня есть несколько активных моделей в представлении этого контроллера, каждая из которых имеет свои собственные данные модели. 

this.setData( emp: [
                    {
                        col1: "1.4",
                        col2: "2.0",
                        col3: "3.1"
                    },
                    {
                        col1: "4.1",
                        col2: "5.3",
                        col3: "6.5"
                    }
                ]);

Итак, я успешно установил данные модели, и теперь я могу получить к ним доступ через: 

var modelData= this.oView.getModel("myModel").oData;

Теперь мне нужно динамически создать sap.m.Dialog и динамически заполните его несколькими sap.m.Input элементами, значения которых основаны на одном объекте из моей модели: 

var getDialogContent = function(modelData){         
            var arr = [];
            var keys = Object.keys(modelData[0]); // property names. I hard-coded first obj for test.
            // I want to use these properties and bind a new input on dialog for each property.

            jQuery.each(keys, function(i, key) {

// 'myModel>/emp/0/'+key is a supposed full path to property...
//  according to this link: 
//  https://sapui5.hana.ondemand.com/1.36.6/docs/guide/91f0ed206f4d1014b6dd926db0e91070.html

                    newInput.bindProperty("value", 'myModel>/emp/0/' + key); //key is col1 the first time
                    newInput.setProperty("description", key);
                    newInput.setProperty("type", sap.m.InputType.Number);
                    arr.push(newInput); 
            });
            return arr;
        };

Я вызываю getDialogContent () в свойстве содержимого диалога, чтобы установить его содержимое.

Теперь все работает, кроме привязки newInput.bindProperty("value", 'myModel>/emp/0/' + key);, отображаемые поля ввода просто пусты и не имеют признаков привязки, также newInput.getBindingContext("myModel"); возвращает неопределенное значение. 

        var dialog = new sap.m.Dialog({
            title: 'Dynamic dialog: ',
            type: 'Message',
            content: getDialogContent(modelData),
            buttons: new sap.m.Button({
                text: 'Cancel',
                press: function () {                    
                    dialog.close();
                }
            }),
            afterClose: function() {
                dialog.destroy();
            }
        });

Кто-нибудь знает, что здесь не так и почему я не могу привязать свое свойство к элементу ввода? Я просто хочу привязать значения моих полей ввода динамического c к произвольному объекту из массива объектов в моей JSON модели. Любые предложения приветствуются.

Редактировать (решение): В строке var keys = Object.keys(modelData[0]); я заменил modelData[0] на modelData["emp"][0], когда я получал доступ к указанной c форме объекта JSONModel. Теперь это работает.

Ответы [ 2 ]

0 голосов
/ 30 января 2020

Один из лучших способов реализовать диалоговое окно - это способ, описанный в по этой ссылке . Вы должны добавить диалоговое окно как зависимое от родительского представления, чтобы получить модели, установленные в этом представлении. 

onDialogOpen: function () {
            if (!this.oDialog) {
                this.oDialog =  new sap.m.Dialog({
                   title: 'Dynamic dialog: ',
                   type: 'Message',
                   content: getDialogContent(modelData),
                   buttons: new sap.m.Button({
                      text: 'Cancel',
                      press: function () {                    
                        this.oDialog.close();
                      }.bind(this)
                   }),
                   afterClose: function() {
                     this.oDialog.destroy();
                   }.bind(this)
               });            
               //to get access to the view models
               this.getView().addDependent(this.oDialog);
            }    
            this.oDialog.open();
        },
0 голосов
/ 29 января 2020

Вы добавили диалог к ​​зависимостям вашего представления ? Когда я удаляю этот шаг в нашем приложении, результат в точности такой, как вы описали: поля пусты и getBindingContext() возвращает undefined.

...