2017-09-01 82 views
1

我有一个自定义控件,它在“详细视图”页面中插入了多个属性。我用这些属性绑定了数据。情景是我有两个页面,一个是列表视图,然后是详细视图。我需要从详细信息页导航并从主页选择差异产品。详细查看页面根据选定的产品显示差异产品详细信息。一切正常。但问题是我的自定义控件不更新值,其他页面有更新的值。更新模型时刷新sapui5中的自定义控件

<custom:product topic="" subTopic="{product>name}" id="productDetial"></custom:product> 

我用一个methond this.getView().byId("productDetail").rerender();但它不更新控制我内心的HTML。

控制码。可能是一些拼写错误。因为我更改了一些变量名称并删除了不需要的代码。目的是为了表明我已经使用的方法,我怎么没

sap.ui.define([ 
     "sap/m/Label", 
     "sap/m/Button", 
     "sap/m/CustomTile" 

    ], function(Label, Button, CustomTile) { 
     "use strict"; 
     jQuery.sap.declare("testProduct.control.product"); 
     return CustomTile.extend("testProduct.control.product", { 
       metadata: { // the Control API 
        properties: { 
         name: { 
          type: "string", 
          defaultValue: "--" 
         }, 
         subTopic: { 
          type: "string", 
          defaultValue: "--" 
         } 
        } 

       }, 
       init: function() { 

       }, 

       rerender: function(oRM, oControl) { 

       }, 
       renderer: function(oRM, oControl) { 
        oRM.write('<div class=" sapMTile customTileCourseDetail">'); 
        oRM.write('<div class="leftTileYourScore">'); 
        if (oControl.getSubTopic() !== "" && oControl.getSubTopic() !== undefined) { 
         oRM.write(oControl.getSubTopic()); 
        } else { 
         oRM.write("&nbsp;"); 
        } 
        oRM.write('</div>'); 
        oRM.write('</div> 
        } 
       }); 
     }); 
+0

您将有机会分享特定的自定义控制更多的代码,找出问题 –

+0

你有没有尝试刷新模式,而不是控制,比如'this.getView()。getModel()。刷新(TURE );'?参数'true'强制刷新使用正在刷新的模型的控件。 – keshet

+0

是的,我试过了。即使当我使用控制台数据它给了我更新的记录。但在页面上显示仍然是前一个 – afaq

回答

1

呦只需要在你的控制添加setter函数。当绑定刷新/更改时,UI5将触发特定于该属性的setter方法。所以在你的情况下属性subTopic它期望一个方法setSubTopic。这个方法应该定义你自己的逻辑来根据你的需要更新UI层的属性。

这是您需要添加的代码的一部分,您还必须稍微调整初始渲染逻辑。

renderer: function (oRM, oControl) { 
     //oRM.write('<div class=" sapMTile customTileCourseDetail">'); 
     oRM.write("<div") 
     oRM.writeControlData(oControl); 
     oRM.addClass("sapMTile customTileCourseDetail"); 
     oRM.writeClasses(); 
     oRM.write(">"); 
     oRM.write('<div class="leftTileYourScore">'); 
     if (oControl.getSubTopic() !== "" && oControl.getSubTopic() !== undefined) { 
      oRM.write(oControl.getSubTopic()); 
     } else { 
      oRM.write("&nbsp;"); 
     } 
     oRM.write('</div>'); 
     oRM.write('</div>'); 
    }, 

    setSubTopic: function(sText){ 
     this.setProperty("subTopic", sText, true); 
     $("#"+this.sId+" .leftTileYourScore").html(sText); 
    }