SAPUI5 根据匹配的上下文/路由动态更改文本

Posted 2023-02-27

【中文标题】SAPUI5 根据匹配的上下文/路由动态更改文本

【英文标题】：SAPUI5 change text dynamically based on context/route matched

【发布时间】：2015-04-30 14:49:15

【问题描述】：

我目前正在开发一个用于用户创建和用户编辑过程的 XML 视图。

是否有一种优雅的方式，例如根据我使用的模式（创建用户/编辑用户）更改视图的标题？最好是不隐藏 DOM 元素的方式。

【问题讨论】：

查看localization上的开发者指南，里面有很多信息。

他不是在谈论本地化，他是在谈论根据上下文设置的动态文本

【参考方案1】：

第 1 步：在您的控制器中说 S1.controller.js ，如果您已经使用 getHeaderFooterOptions 定义了 headerFooter 就好了。否则定义它

    getHeaderFooterOption:function()
    var that = this;
    var objHeaderFooterOptions = 
        sI18NFullscreenTitle: "CREATE_TITLE",//you need to define the value in i18n files
        //
        /*oEditBtn: 
            sId: "BTN_SEND",
            sI18nBtnTxt: "USER_CREATE",
            onBtnPressed: function(evt) 
                that.handleCreate(evt);
            
        ,*/
        buttonList: [
                 //your footer buttons go here
                  ]
    ;
    return objHeaderFooterOptions;
    

现在，在控制器的 onInit() 中：

onInit: function () 
    var that = this;
    this.oRouter.attachRouteMatched(function (oEvent) 

        if (oEvent.getParameter("name") === "create")  //the name you have given for the view in **Component.js**
            //your initial create login
        
      //this will be executed whent you come as update context
        if (oEvent.getParameter("name") === "update")  //the name you have given for the view in Component.js
            var editContextHeaderFooter = that.getHeaderFooterOptions();
            editContextHeaderFooter.sI18NFullscreenTitle = "UPDATE_TITLE" //define the value in i18n file
                //you can edit other values also, example you want a different button in the footer.
            that.setHeaderFooterOptions(editContextHeaderFooter);

        
    );

在Component.js的元数据中

fullScreenPageRoutes : 
            // fill the routes to your full screen pages in here.
                "create" : 
                    "pattern" : "",
                    "view" : "S1"
                ,
                "update" : 
                    "pattern" : "update/context",
                    "view" : "S1"
                
            

在 i18n.properties 文件中

#XTIT: Create Screen Title
CREATE_TITLE: Create New User

#XTIT: Update Screen Title
UPDATE_TITLE: Update User

【讨论】：

您好，感谢您的回答！ “setHeaderFooterOptions”从何而来？如果我尝试调用它，它会说这不是一个函数。

您在使用脚手架控制器吗？如果没有，请把你的控制器代码和xml视图

这是我的代码（我删掉并重命名，所以不要混淆）gist.github.com/anonymous/57281d751617c0ed7a96

删除我所说的！！ :) 这很容易.. 给您的页面提供 ID。然后使用 this.byId("pageId").setTitle("your text");

设置

【参考方案2】：

如果您使用的是纯 UI5 应用程序：

 onRouteMatched : function(oEvent) 
    var that = this;
    if (oEvent.getParameter("name") === "user")  //the name you have given for the view in **Component.js**
        //your initial create login
    that.byId("myPage").setTitle("Create New user");
   that.byId("objHeader").setTitle("Update user");
    
  //this will be executed when you come as update context
    if (oEvent.getParameter("name") === "edituser") 

        that.byId("myPage").setTitle("Update user");
        that.byId("objHeader").setTitle("Update user");
    
  

XML 中类似的添加 ID：

<Page id="myPage" class="sapUiFioriObjectPage" title="i18n>createNewUserHdrTitle"
        showNavButton="true" navButtonTap="onNavBack">
        <ObjectHeader id="objHeader" title="i18n>createNewUserHdrTitle">
        </ObjectHeader>
    </Page>

如果您使用 i18n 文本，请确保将翻译资源绑定到您的视图。

【讨论】：

基本上这是我不想走的路，因为控制器文件中的 UI 逻辑太多了。有没有办法使用前缀？例如i18n>new_title 和i18n>edit_title?

据我所知没有其他解决方案！