Question

我想将javascript生成的视图传输到xmlView。

这很好用，我可以将它添加到shell中：

var headItem = new sap.ui.unified.ShellHeadItem({
        icon: "sap-icon://upload-to-cloud",
        id: "network-icon",
        customData: [
            new sap.ui.core.CustomData({
                key: "color",
                value: "{= ${appValues>/isOnline} ? 'is-online' : 'is-offline' }",
                writeToDom: true
            })
        ]
});

将此内容添加到XML视图需要做什么：

<u:ShellHeadItem
    id="network-icon"
    icon="sap-icon://upload-to-cloud"
    tooltip="Network status"/>

我尝试在viewController中添加它，但它不会更新DOM。

onInit: function() {
    var oNetworkIcon = this.getView().byId("network-icon");

    oNetworkIcon.setModel(sap.ui.getCore().getModel("appValues"));
    oNetworkIcon.addCustomData(new sap.ui.core.CustomData({
           key: "color",
           value: "{= ${/isOnline} ? 'is-online' : 'is-offline' }",
           writeToDom: true
    }));
    //if you happen to know how to add a class
    oNetworkIcon.addStyleClass("blub"); 
},

Answer 1

试试这个：

<u:ShellHeadItem
        id="network-icon"
        icon="sap-icon://upload-to-cloud"
        tooltip="Network status">
    <u:customData>
        <core:CustomData key="color" value="{= ${/isOnline} ? 'is-online' : 'is-offline' }" writeToDom="true" />
    </u:customData>
</u:ShellHeadItem>

Answer 2

我知道 OP 正在寻求一种将数据写入 DOM 的方法。
但是对于那些只需要通过 JS 访问控件的额外数据的人来说：
这种方法更精简，更容易阅读：

<mvc:View xmlns:mvc="sap.ui.core.mvc"
  xmlns:customData="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
  xmlns:unified="sap.ui.unified">
  <unified:ShellHeadItem id="network-icon"
    icon="sap-icon://upload-to-cloud"
    tooltip="Network status"
    customData:color="{= ${/isOnline} ? 'is-online' : 'is-offline' }" />
</mvc:View>

您可以像这样访问这些额外的数据：

var myData = this.byId("network-icon").data("color");

文档：Custom Data - Attaching Data Objects to Controls（请参阅“在 XML 视图中使用”）。

SAPUI5将customData添加到xmlView

2 个答案: