Fiori2.0-在SAPUI5中控制一个“块”的隐藏与显示：setVisible

Introduction

在开发中，我们可能会遇到像通过控制一些控件来跳转两个部分极为相似的页面。如果通过路由的跳转则会造成view的滥用，为路由增添负担，影响加载效率。或者可以通过一个view两个fragment来切换部分不相似的部分。但是今天我介绍的方法要比上面两个都要简单实用，我们可以想到就是利用类似JS中的display属性，但是SAPUI5并不支持原生JS，那么我们该如何实现呢？

Preview

通过点击button使页面所有的input、combobox由不可编辑状态与可编辑状态相互切换，同时按钮的提示要做出相应改变。

Coding

关于view部分就不给出了，你只需要知道这里其实是两个page，你可以把他看做成两个div,分别给他们一个ID，同时editPage设置属性visible=”true”，savePage设置属性visible=”false”。

controller coding

        ChangeStyleEdit: function(oEvent) {

            var div1 = this.getView().byId("div1");
            div1.setVisible(false);
            var div2 = this.getView().byId("div2");
            div2.setVisible(true);

        },
        ChangeStyleSave: function(oEvent) {

                var div1 = this.getView().byId("div1");
                div1.setVisible(true);
                var div2 = this.getView().byId("div2");
                div2.setVisible(false);

            }

Analyze

首先，就是把两个page页写在同一个view上，分别给他们一个ID，同时editPage设置属性visible=”true”，savePage设置属性visible=”false”。

给editPage的button设置press。期望点击按钮后，controller获取到editPage、savePage的id，然后改变editPage、savePage的Visible属性，来达到隐藏与显示。

var div1 = this.getView().byId("div1");
            div1.setVisible(false);
            var div2 = this.getView().byId("div2");
            div2.setVisible(true);

第二个是相似的道理，再次就不再做赘述。