当模型更改sapui5时，我的视图不会更新

时间：2018-02-05 10:33:24

标签： json data-binding sapui5

早上好，

我有这个问题，我一直试图解决这个问题，我找不到答案，也找不到我的同事。

我的问题是我将JSON中的两个布尔值绑定到两个不同的可见属性。 JSON的初始值是正确绑定的，但是当修改我的json时，更改不会反映在我的视图中。

请注意，所有常量字符串都是正确的。

我的JSON初始化：

onInit : function(){
    var inputModel = new sap.ui.model.json.JSONModel({            
        inputEditable: true,
        formVisible: true
    });
    this.getView().setModel(inputModel, Constants.MODEL.USER_FINDER_HELP);

},

属性formVisible绑定：

new sap.ui.layout.form.SimpleForm({
                editable: true,
                layout: sap.ui.layout.form.SimpleFormLayout.ResponsiveGridLayout,
                labelSpanXL: 1,
                labelSpanL: 2,
                labelSpanM: 2,
                labelSpanS: 3,
                visible:"{"+Constants.MODEL.USER_FINDER_HELP+">/formVisible}",
                content: [ 

                    new sap.m.VBox({
                    visible : true,   
                    items:[
                        new sap.m.HBox({
                            items: [
                                new sap.m.RadioButton({

                                    groupName : "Group1",
                                    text : "{"+Constants.MODEL.I18N+">completeName}",
                                    select : [oController.controlCampos, oController],
                                    selected : true,                                
                                }),
                                new sap.m.Input("inputNombre",{
                                    enabled : "{"+Constants.MODEL.USER_FINDER_HELP+">/inputEditable}",                                                                                
                                    //type : sap.m.InputType.Text,
                                    placeholder : "Introduzca nombre completo"
                                })
                            ]
                        }),
                        new sap.m.HBox({
                            items : [
                                new sap.m.RadioButton({
                                    groupName : "Group1",
                                    text : "{"+Constants.MODEL.I18N+">user}",                             
                                }),
                                new sap.m.Input("inputUsuario",{                                        
                                    enabled : 
                                    {
                                        path: Constants.MODEL.USER_FINDER_HELP+">/inputEditable",       
                                        formatter : formatter.generic.negate                                     
                                    },
                                    //type : sap.m.InputType.Text,
                                    placeholder : "Usuario" //TODO i18n
                                })
                            ]
                        })


                    ]
                   })
                ]
                }).addStyleClass("scopeSelectorForm"),                    
                new sap.m.Bar({
                    contentRight: [ 
                        new sap.m.Button({
                            text: "{"+Constants.MODEL.I18N+">filter}",
                            icon : "sap-icon://action",
                            visible: "{"+Constants.MODEL.USER_FINDER_HELP+">/formVisible}",
                            iconFirst: false,
                            press: [oController.filterAndExpand, oController]
                        }),
                        new sap.m.Button({
                            text: "{"+Constants.MODEL.I18N+">clean}",
                            icon: "sap-icon://action",
                            iconFirst: false,
                            visible: "{"+Constants.MODEL.USER_FINDER_HELP+">/formVisible}",
                            press: [oController.cleanForm, oController]
                        }),
                        new sap.m.Button({
                            text: "{"+Constants.MODEL.I18N+">hide}",
                            icon: "sap-icon://action",
                            iconFirst: false,
                            visible: "{"+Constants.MODEL.USER_FINDER_HELP+">/formVisible}",
                            press: [oController.hideOrShowForm, oController]
                        }),
                        new sap.m.Button({
                            text: "{"+Constants.MODEL.I18N+">show}",
                            icon: "sap-icon://action",
                            iconFirst: false,
                            visible: {
                                path:Constants.MODEL.USER_FINDER_HELP+">/formVisible",
                                formatter: formatter.generic.negate
                            }, 
                            press: [oController.hideOrShowForm, oController]
                        })
                    ]
                }).addStyleClass("greyBar"),

我改变财产的方法：

hideOrShowForm : function(evt){
    var inputModel = this.getView().getModel(Constants.MODEL.USER_FINDER_HELP);
    inputModel.setProperty("/formVisible", !(inputModel.getProperty("/formVisible")));
    inputModel.updateBindings();        
    this.getView().invalidate();
}

总而言之，我的视图获取初始值（尝试使用false），但在我的代码中更改时不会更新。

谢谢！

修改

我正在分享我视图的其余代码，以防出现问题。

sap.ui.jsview("view.UserFinderHelp",{
getControllerName : function() {
    return "controller.UserFinderHelp";
},
createContent : function(oController){
    return new sap.m.Dialog({
        draggable:true,
        id: Constants.ID.USER_FINDER_HELP,
        contentWidth: "50%",
        contentHeight: "80%",
        showHeader: true,
        verticalScrolling:false,
        horizontalScrolling:false,
        escapeHandler: oController.onClose,
        customHeader: new sap.m.Bar({
            contentLeft: [
                new sap.m.Text({
                    text: "{"+Constants.MODEL.I18N+">usersFinder}"
                })
            ],
            contentRight: [
                new sap.m.Button({
                    icon: "sap-icon://decline",
                    customData:[
                        new sap.ui.core.CustomData({
                            key: "viewId",
                            value: this.getId()
                        })
                    ], 
                    press: [oController.onClose, oController]              
                })
            ],


         }).addStyleClass("sapMBarTitle"),
        content:[
            new sap.m.Bar({
                contentLeft:[
                    new sap.m.Text({
                        text: "{"+Constants.MODEL.I18N+">finderParameters}"
                    })
                ]

            }).addStyleClass("sapMBarSubTitle"),
            new sap.ui.layout.form.SimpleForm({
                editable: true,
                layout: sap.ui.layout.form.SimpleFormLayout.ResponsiveGridLayout,
                labelSpanXL: 1,
                labelSpanL: 2,
                labelSpanM: 2,
                labelSpanS: 3,
                visible:"{"+Constants.MODEL.USER_FINDER_HELP+">/formVisible}",
                content: [                                                
                    new sap.m.VBox({
                    visible : true,   
                    items:[
                        new sap.m.HBox({
                            items: [
                                new sap.m.RadioButton({

                                    groupName : "Group1",
                                    text : "{"+Constants.MODEL.I18N+">completeName}",
                                    select : [oController.controlCampos, oController],
                                    selected : true,                                
                                }),
                                new sap.m.Input("inputNombre",{
                                    enabled : "{"+Constants.MODEL.USER_FINDER_HELP+">/inputEditable}",                                                                                
                                    //type : sap.m.InputType.Text,
                                    placeholder : "Introduzca nombre completo"
                                })
                            ]
                        }),
                        new sap.m.HBox({
                            items : [
                                new sap.m.RadioButton({
                                    groupName : "Group1",
                                    text : "{"+Constants.MODEL.I18N+">user}",                             
                                }),
                                new sap.m.Input("inputUsuario",{                                        
                                    enabled : 
                                    {
                                        path: Constants.MODEL.USER_FINDER_HELP+">/inputEditable",       
                                        formatter : formatter.generic.negate                                     
                                    },
                                    //type : sap.m.InputType.Text,
                                    placeholder : "Usuario" //TODO i18n
                                })
                            ]
                        })


                    ]
                   })
                ]
                }).addStyleClass("scopeSelectorForm"), 

                new sap.m.Bar({
                    contentRight: [ 
                        new sap.m.Button({
                            text: "{"+Constants.MODEL.I18N+">search}",
                            icon : "sap-icon://action",
                            visible: "{"+Constants.MODEL.USER_FINDER_HELP+">/formVisible}",
                            iconFirst: false,
                            press: [oController.filterAndExpand, oController]
                        }),
                        new sap.m.Button({
                            text: "{"+Constants.MODEL.I18N+">clean}",
                            icon: "sap-icon://action",
                            iconFirst: false,
                            visible: "{"+Constants.MODEL.USER_FINDER_HELP+">/formVisible}",
                            press: [oController.cleanForm, oController]
                        }),
                        new sap.m.Button({
                            text: "{"+Constants.MODEL.I18N+">hide}",
                            icon: "sap-icon://action",
                            iconFirst: false,
                            visible: "{"+Constants.MODEL.USER_FINDER_HELP+">/formVisible}",
                            press: [oController.hideOrShowForm, oController]
                        }),
                        new sap.m.Button({
                            text: "{"+Constants.MODEL.I18N+">show}",
                            icon: "sap-icon://action",
                            iconFirst: false,
                            visible: {
                                path:Constants.MODEL.USER_FINDER_HELP+">/formVisible",
                                formatter: formatter.generic.negate
                            }, 
                            press: [oController.hideOrShowForm, oController]
                        })
                    ]
                }).addStyleClass("greyBar"),
                new sap.ui.table.Table({
                    //rows : "{"+Constants.MODEL.USER_FINDER_HELP_RESULTS+">/userScopeList}",
                    items : {
                        path: Constants.MODEL.USER_FINDER_HELP_RESULTS+">/userScopeList",
                        template : new sap.m.ColumnListItem({
                            cells:[
                                new sap.m.Text({
                                text: "{"+Constants.MODEL.USER_FINDER_HELP_RESULTS+">login}"
                            }),
                                new sap.m.Text({
                                    text: "{"+Constants.MODEL.USER_FINDER_HELP_RESULTS+">name}"
                                })
                            ]
                        })
                    },
                    columns : [
                        new sap.ui.table.Column({
                            label : new sap.m.Label({
                                text : "{"+Constants.MODEL.I18N+">user}"
                            })                                 
                        }),
                        new sap.ui.table.Column({
                            label : new sap.m.Label({
                                text : "{"+Constants.MODEL.I18N+">completeName}"
                            })

                        })
                    ]
                })                                        
        ],
        buttons : [
            new sap.m.Button({
                text:  "{"+Constants.MODEL.I18N+">Continue}"                    
            }),
            new sap.m.Button({
                text: "{"+Constants.MODEL.I18N+">cancel}",
                press: [oController.onClose, oController]        
            })
        ]

}).addEventDelegate({
    onBeforeRendering: function(evt){
        sap.ui.getCore().byId(Constants.ID.APP).addDependent(evt.srcControl);
    },

}).addStyleClass("UserFinderDialog")

}

});

2 个答案:

答案 0 :(得分：1)

如果双向绑定处于活动状态，则应该没问题。

参见示例：example

＆＃13;
＆＃13; 
sap.ui.controller("myController", {
  onInit: function() {


    var jsonData = {
      text: "secondButton",
      formVisible: true
    };
    var jsonModel = new sap.ui.model.json.JSONModel(jsonData);
    this.getView().setModel(jsonModel, "myModel");

  },

  hideOrShowForm: function(evt) {
    var inputModel = this.getView().getModel("myModel");
    inputModel.setProperty("/formVisible", !(inputModel.getProperty("/formVisible")));
  }

});

sap.ui.view({
  viewContent: jQuery('#myXml').html(),
  type: sap.ui.core.mvc.ViewType.XML
}).placeAt("content");
＆＃13; 
<script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m, sap.ui.layout,sap.suite.ui.commons, sap.ui.commons, sap.ui.table" data-sap-ui-xx-bindingSyntax="complex">
</script>

<script id="myXml" type="text/xmldata">
  <mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="myController" displayBlock="true">
    <App>
      <Page>
        <Panel>

          <Button text="Press" type="None" iconFirst="true" width="auto" enabled="true" iconDensityAware="false" press="hideOrShowForm" />


          <Button text="{myModel>/text}" type="None" iconFirst="true" width="auto" enabled="true" visible="{myModel>/formVisible}" iconDensityAware="false" />

        </Panel>
      </Page>
    </App>
  </mvc:View>
</script>

<body class="sapUiBody" role="application">
  <div id="content"></div>
</body>
＆＃13;
＆＃13;
＆＃13;

问候

答案 1 :(得分：1)

我终于找到了为什么会这样。因为我的视图是一个用ComponentLoader调用的Dialog。我不认为我实际上是将它绑定到调用我的视图。

相反，我只是像这样绑定它：

 this.getView().getContent()[0].setModel(inputModel, Constants.MODEL.USER_FINDER_HELP);

感谢那些帮助我的人！

相关问题
最新问题