我需要使用sapui5在同一内容div中呈现两个视图

时间:2014-06-19 23:17:11

标签: views sapui5

我想在同一个div#id中呈现一个视图,第一个视图有一个按钮,当用户按下我需要在同一内容中呈现一个新视图的按钮时,我试图做这个,但是视图重叠,我该怎么做,这是我使用的代码:

            <script id="sap-ui-bootstrap" 
            src="https://openui5.netweaver.ondemand.com/resources/sap-ui-core.js"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.m"
            data-sap-ui-xx-bindingSyntax="complex">
    </script>


    <!-- XML-based view definition -->
    <script id="view1" type="sapui5/xmlview">
        <mvc:View
            controllerName="local.controller"
            xmlns:mvc="sap.ui.core.mvc"
            xmlns="sap.m">
            <!-- Add your XML-based controls here -->
            <Button
                icon="sap-icon://example"
                text="Invalidate view"
                press="clicked" />
             <Button
                icon="sap-icon://example"
                text="Invalidate view"
                press="clicked" />  

        </mvc:View> 
    </script>

    <script id="view2" type="sapui5/xmlview">

        <mvc:View
            controllerName="local.controller"
            xmlns:mvc="sap.ui.core.mvc"
            xmlns="sap.m">
            <!-- Add your XML-based controls here -->
            <Button
                icon="sap-icon://example"
                text="Esta es otra vista"
                press="clicked" />
        </mvc:View> 
    </script>
    <script>


        // Controller definition
        sap.ui.controller("local.controller", {

            onInit: function(oEvent) {
                //alert("onInit()");
            },

            onBeforeRendering: function(oEvent) {
                //alert("onBeforeRendering()");
            },

            clicked: function(oEvent) {
                //var oview.removeAllContent();
                jQuery("#content").html("");
                 var oView = sap.ui.xmlview({
                  viewContent: jQuery("#view2").html()
                });
                oView.setModel(new sap.ui.model.json.JSONModel({
                    name: "value"
                }));

                oView.placeAt("content");
            }

        });
        // Instantiate the View, assign a model and display
        var oView2 = sap.ui.xmlview({
          viewContent: jQuery("#view1").html()
        });

        oView2.setModel(new sap.ui.model.json.JSONModel({
            name: "value"
        }));

        oView2.placeAt("content");


    </script>

1 个答案:

答案 0 :(得分:0)

sap.ui.getCore().getUIArea("content").removeContent(this.getView());