Question

我需要为每个 FeedListItem 添加不同的css类。

我需要将它分别添加到每个班级和动态（JS文件中的onPost方法），因为我根据输入的输入输入添加了不同的类。

我检查了sapui5指南，但我看不到FeedListItem与样式和CSS有关的属性。

通缉结果：

<ul> //FeedListItems
  <li class="<MY_CUTOM_CLASS_1>"></li>
  <li class="<MY_CUTOM_CLASS_2>"></li>
  <li class="<MY_CUTOM_CLASS_3>"></li>
</ul>

最好的方法是什么？

我该怎么做？

XML文件：

<FeedInput
    post="onPost"
    icon="test-resources/sap/m/images/dronning_victoria.jpg"
    class="sapUiSmallMarginTopBottom" />
<List
    showSeparators="Inner"
    items="{/EntryCollection}" >
    <FeedListItem
        sender="{Author}"
        icon="{AuthorPicUrl}"
        senderPress="onSenderPress"
        iconPress="onIconPress"
        iconDensityAware="false"
        info="{Type}"
        timestamp="{Date}"
        text="{Text}" />
</List>

JS档案：

sap.ui.define([
    'jquery.sap.global',
    'sap/m/MessageToast',
    'sap/ui/core/format/DateFormat',
    'sap/ui/core/mvc/Controller',
    'sap/ui/model/json/JSONModel'
], function(jQuery, MessageToast, DateFormat, Controller, JSONModel) {
"use strict";

var CController = Controller.extend("sap.m.sample.Feed.C", {

    onInit: function () {
        // set mock model
        var sPath = jQuery.sap.getModulePath("sap.m.sample.Feed", "/feed.json")
        var oModel = new JSONModel(sPath);
        this.getView().setModel(oModel);
    },

    onPost: function (oEvent) {
        var oFormat = DateFormat.getDateTimeInstance({style: "medium"});
        var oDate = new Date();
        var sDate = oFormat.format(oDate);
        // create new entry
        var sValue = oEvent.getParameter("value");
        var oEntry = {
            Author : "Alexandrina Victoria",
            AuthorPicUrl : "http://upload.wikimedia.org/wikipedia/commons/a/aa/Dronning_victoria.jpg",
            Type : "Reply",
            Date : "" + sDate,
            Text : sValue
        };

        // update model
        var oModel = this.getView().getModel();
        var aEntries = oModel.getData().EntryCollection;
        aEntries.unshift(oEntry);
        oModel.setData({
            EntryCollection : aEntries
        });
    }   });


return CController;

}）;

Answer 1

编辑：最高版本1.48，不可能设置绑定到属性“class”。但是“addStyleClass”和这个work around可以解决。

我是afk，因此无法验证以下内容。但这应该解决它。在xml视图中是要添加到feedlistitem的属性“class”。在js控制器中属性为对象“oEntry”。并且模型也需要处理类属性。

xml视图：

<FeedInput
  post="onPost"
  icon="test-resources/sap/m/images/dronning_victoria.jpg"
  class="sapUiSmallMarginTopBottom" />
<List
  showSeparators="Inner"
  items="{/EntryCollection}">
  <FeedListItem

    class="{Class}"

    sender="{Author}"
    icon="{AuthorPicUrl}"
    senderPress="onSenderPress"
    iconPress="onIconPress"
    iconDensityAware="false"
    info="{Type}"
    timestamp="{Date}"
    text="{Text}" />
</List>

控制器js：

onPost: function (oEvent) {
  var oFormat = DateFormat.getDateTimeInstance({style: "medium"});
  var oDate = new Date();
  var sDate = oFormat.format(oDate);
  // create new entry
  var sValue = oEvent.getParameter("value");
  var oEntry = {

    Class: "CSSClass",

    Author : "Alexandrina Victoria",
    AuthorPicUrl : "http://upload.wikimedia.org/wikipedia/commons/a/aa/Dronning_victoria.jpg",
    Type : "Reply",
    Date : "" + sDate,
      Text : sValue
    };
    // update model
    var oModel = this.getView().getModel();
    var aEntries = oModel.getData().EntryCollection;
    aEntries.unshift(oEntry);
    oModel.setData({
      EntryCollection : aEntries
    });
}

SAPUI5：如何为每个FeedList项添加不同的css类？

1 个答案: