Блог

У меня проблема с пользовательским элементом управления UI5, основанным на sap/ui/unified/MenuItem . Элемент управления обладает свойством itemSelected , которое привязано JSONModel к объекту шаблона. Проблема в том, что когда я нажимаю на элемент , свойство не изменяется в JSONModel , хотя я изменяю его для элемента управления:

 sap.ui.define(
['sap/ui/unified/MenuItem'],
function(MenuItem) {
    
    return MenuItem.extend("xyz.namespace.CustomMenuItem", {
        
        metadata: {
            properties: {
                text : {type : "string", group : "Appearance", defaultValue : 'Test'}, 
                color: {type : "sap.ui.core.CSSColor", group : "Appearance", defaultValue : '#FFFFAA'},
                itemSelected: {type: "boolean", group : "Appearance", defaultValue : false }, 
                type: {type: "string", group : "Appearance" }
            }, 
            aggregations: {
                _checkbox: { type: "sap.m.CheckBox", multiple: false, visibility: "hidden" }
            }
        },
        
        init: function(){
        
            this.setAggregation("_checkbox", new sap.m.CheckBox({
                text: this.getText(),
                select: function(e){ 
                    e.getSource().setSelected(true);
                }.bind(this)
            }));
            
            this.attachSelect(function(oEvent){
                this.getAggregation("_checkbox").fireSelect();
                this._onSelect(oEvent);
            }.bind(this)); 
            
        },
        
        _onSelect : function(e){
            // var oCheckBox = this.getAggregation("_checkbox"); 
            var bSelected = this.getItemSelected() ? false : true; 
            this.setItemSelected(bSelected); 
            // oCheckBox.setSelected(bSelected); 
        }, 
        
        
        render: function(oRenderManager, oItem) {
             
                var rm = oRenderManager;
                //oItem.updateAllParts();
        
                rm.openStart("li", oItem);
                rm.openEnd(); // <li>
                

                rm.openStart("div"); 
                rm.addClass("custom_menu_item_wrapper");
                rm.openEnd(); //<div class="custom_menu_item_wrapper">
            
            
                // Text column
                rm.openStart("div");
                rm.addClass("custom_menu_item_colorbox");
                rm.addStyle("background-color", oItem.getColor());
                rm.openEnd();
                rm.close("div");    
                
                // checkbox as standalone render
                rm.renderControl(oItem.getAggregation("_checkbox"));

                rm.close("div"); // </div>
                rm.close("li");  // </li>   
                 
        }, 
        
        onAfterRendering : function(){
            this.getAggregation("_checkbox").setText(this.getText());
        }
        
    }); 
});
 

Пункты меню заполняются следующим образом:

 $.each(aItems, function(index, item){
                aMenuItems.push({ 
                    text: item.getText(), 
                    itemSelected: false, 
                    type: item.getType(),
                    color: this._getTypeColor(item.getType())
                });     
            }.bind(this));
            
            oModel.setData({items: aMenuItems});
            
            var oTemplateBinding = new xyz.namespace.CustomMenuItem({
                text:       "{text}",
                itemSelected:   "{itemSelected}",
                color:      "{color}"   
            });
            
            oMenu.setModel(oModel);
            oMenu.bindAggregation("items",  "/items", oTemplateBinding  );
 

Если откроется меню и я нажму на пункт, itemSelected он должен быть заполнен до привязки, но этого не происходит.

Вторая проблема заключается в том, что, если я использую привязку, флажок не устанавливается, что также довольно странно.

Есть идеи, что я делаю не так?