通过 Controller 动态创建 UI 元素并将它们绑定到 Model 中的特定属性

Question

我一直在尝试根据我的 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;
        };

我在对话框的 content 属性中调用 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();
            }
        });                    

有谁知道这里出了什么问题，为什么我不能将我的属性绑定到输入元素？我基本上只想将动态输入字段的值绑定到 JSON 模型中对象数组中的任意对象。欢迎提出任何建议。

编辑（解决方案）： 在 var keys = Object.keys(modelData[0]); 行上，当我访问 JSONModel 的特定对象时，我将 modelData[0] 替换为 modelData["emp"][0]。现在可以了。

Answer 1

你add the dialog to the dependents of your view了吗？当我在我们的应用程序中删除该步骤时，结果与您描述的完全一样：字段为空，getBindingContext() 返回undefined。

Answer 2

以可重用方式实现对话框的最佳方法之一是this link 中描述的方法。您必须将对话框添加为依赖于“父”视图才能检索该视图上设置的模型。

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();
        },