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

Question

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

在page1.view我有2个选择控件,它显示在这里(我感谢艾伦对他的帮助).使用ajax调用从数据库填充这些选择控件.

问题是当我在page2.view上向一个公司添加一个新项目时,我无法在page1.view上进行项目选择控制来刷新.

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

那么,问题是如何刷新我的项目选择控件,以便我可以看到新添加的项目而无需重新选择公司？

Answer 1

你需要调用refresh()JSONModel.请运行并检查代码段.

 <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>