2017-08-21 28 views
0

私はXMLでFeedListありますSAPUI5 - モデルデータに基づいてFeedListItemのスタイルを変更するにはどうすればよいですか?

<List 
id="msgList" 
showSeparators="Inner" 
items="{msgData>/msgData}" > 
<FeedListItem 
    sender="{msgData>UserName}" 
    icon="{msgData>userPicture}" 
    senderPress="onSenderPress" 
    iconPress="onIconPress" 
    iconDensityAware="false" 
    info="{msgData>Type}" 
    timestamp="{msgData>Date}" 
    text="{msgData>Text}" 
    class="{msgData>Type}" 
    maxCharacters="1000"/> 

をと私は何モデル

var oDate = new Date(); 
var msgData = { msgData:[{ 
    Title: "", 
    Text: "Loading...", 
    UserName: "AyTee", 
    userPicture:"image.png" 
}]}; 
var oModelMockIntention = new JSONModel(msgData); 
this.fragment.setModel(oModelMockIntention, "msgData"); 

から受け取ったデータに応じてスタイルを変更するには、各フィードアイテムを必要としますそれを行うための最善の方法?

あなたがFeedListItemのtextプロパティでフォーマッタを持つことができ、この方法では、あなたがこのインスタンスを使用し、以下に述べるように、その特定のFeedListItemのスタイルを更新するaddStyleClassとremoveStyleClassメソッドを使用することができます
+0

'class'属性をモデルにバインドすることはできません。アイコンのような組み込みプロパティを使用するか、モデルの変更時に必要なCSSクラスを手動で追加/削除する –

+0

[条件の場合にアイコンの色を変更する]の可能な複製(https://stackoverflow.com/questions/44393300/change-アイコン - 色 - 条件 - ) –

答えて

0

<List 
id="msgList" 
showSeparators="Inner" 
items="{msgData>/msgData}" > 
<FeedListItem 
    sender="{msgData>UserName}" 
    icon="{msgData>userPicture}" 
    senderPress="onSenderPress" 
    iconPress="onIconPress" 
    iconDensityAware="false" 
    info="{msgData>Type}" 
    timestamp="{msgData>Date}" 
    text="{parts: ['msgData>Text', 'msgData>Type'],formatter:'.updateColor'}" 
    maxCharacters="1000"/> 

インサイドビューのコントローラには、以下に述べる方法があります。

updateColor:function(text, type){ 
     this.addStyleClass(type); 
     return text; 
    } 
関連する問題