sapui5 - 模型更改后如何刷新控件？

Question

我使用 SplitApp 构建了一个 Web 应用程序，我的 sap.m.Select 控件有问题。

在 page1.view 上，我有 2 个选择控件，如图所示 here (感谢 Allen 的帮助)。这些选择控件是使用 ajax 调用从数据库中填充的。

问题是，当我在page2.view 上的其中一家公司添加新项目时，无法使page1.view 上的项目选择控件刷新。

例如，如果我转到 page1.view，在第一个选择控件中选择 firm3，然后转到 page2.view 并将项目 4 添加到 firm3，然后导航回 page1.view，我仍然看到公司 3 被选中并且第二个选择控件中只有 3 个项目可用。但是如果我选择任何其他公司然后再次选择公司 3，我将在选择菜单中看到第 4 个项目。

那么，问题是如何刷新我的项目选择控件，这样我就可以在不重新选择公司的情况下看到新添加的项目？

Answer 1

需要调用JSONModel的refresh()。请运行并检查代码片段。

 <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m,sap.ui.commons"></script>

<script id="view1" type="sapui5/xmlview">
    <mvc:View xmlns:core="sap.ui.core" xmlns:layout="sap.ui.commons.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.ui.commons" controllerName="my.own.controller" xmlns:html="http://www.w3.org/1999/xhtml">
        <layout:VerticalLayout id="vl">
            <Button press="handlePress" text="Add Dummy Project to Firm1"/>
            <DropdownBox id="db1" items="{/firms}" change="onchange">
                <items>
                    <core:ListItem key="{name}" text="{name}" />
                </items>
            </DropdownBox>
            <DropdownBox id="db2" items="{namedmodel>/projects}">
                <items>
                    <core:ListItem key="{namedmodel>name}" text="{namedmodel>name}" />
                </items>
            </DropdownBox>
        </layout:VerticalLayout>
    </mvc:View>
</script>


<script>
    sap.ui.controller("my.own.controller", {

        onInit: function() {
            var data = {
                "firms": [{
                    "name": "firm1",
                    "projects": [{
                        "name": "firm1project1"
                    }, {
                        "name": "firm1project2"
                    }, {
                        "name": "firm1project3"
                    }]
                }, {
                    "name": "firm2",
                    "projects": [{
                        "name": "firm2project1"
                    }, {
                        "name": "firm2project2"
                    }, {
                        "name": "firm2project3"
                    }]
                }, {
                    "name": "firm3",
                    "projects": [{
                        "name": "firm3project1"
                    }, {
                        "name": "firm3project2"
                    }, {
                        "name": "firm3project3"
                    }]
                }, {
                    "name": "firm4",
                    "projects": [{
                        "name": "firm4project1"
                    }, {
                        "name": "firm4project2"
                    }, {
                        "name": "firm4project3"
                    }]
                }]
            };

            var oModel = new sap.ui.model.json.JSONModel();
            oModel.setData(data);
            sap.ui.getCore().setModel(oModel);
            //set initial values for second dropdown box
            var oModel2 = new sap.ui.model.json.JSONModel();
            oModel2.setData(data.firms[0]);
            //using named data model binding for second dropdown box
            this.byId("db2").setModel(oModel2, "namedmodel");


        },
        //event handler for first dropdown box selection change
        onchange: function(oEvent) {
            var bindingContext = oEvent.mParameters.selectedItem.getBindingContext();
            var oModel = oEvent.getSource().getModel();
            var firmData = oModel.getProperty(bindingContext.sPath);
            var oModel = new sap.ui.model.json.JSONModel();
            oModel.setData(firmData);
            this.byId("db2").setModel(oModel, "namedmodel");

        },
        
        handlePress:function(oEvent) {
          //Add a dummy project to firm1
            var projectDropDown = this.byId("db2");
            var oModel = projectDropDown.getModel("namedmodel");
            oModel.oData.projects.push({"name":"dummy project"});
            oModel.refresh();
        }


    });


    var myView = sap.ui.xmlview("myView", {
        viewContent: jQuery('#view1').html()
    }); // 
    myView.placeAt('content');
</script>



<body class='sapUiBody'>
    <div id='content'></div>
</body>