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

时间:2014-10-21 18:13:59

标签: sapui5

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

在page1.view上我有2个选择控件,因为它显示为here(感谢Allen的帮助)。这些选择控件使用ajax调用从数据库填充。

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

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

所以,问题是如何刷新我的项目选择控件,以便在不重新选择公司的情况下看到新添加的项目?

2 个答案:

答案 0 :(得分:8)

您需要调用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>

答案 1 :(得分:0)

myODataModel.refresh(true) should work

如果它仍然不起作用(就我而言),您可以使用此解决方法: 在填充新的东西之前,用空数组或对象填充模型。

var ajaxSuccess = function(newArray) {
    myODataModel.setData([])
    myODataModel.setData(newArray)
}

这肯定会让控制更新。