javascript - SAPUI5 : How to find the item from sap. m.list 如果我只有该对象？

Question

假设我只有有关该对象的信息，但没有列表项信息

示例:

    //The list 
    var odragableListServices = that.byId("dragableListServices");
    var oBinding= odragableListServices.getBinding("items");
    //This will return the first Object in JSON format 
     var oListObj =  oBinding.getModel("NoneAssignedTaskModel").getProperty("/data/1");

现在，我的问题是:如何向后执行？ (相反的方式)假设我只有 json 对象:oListObj

我想返回类似:__xmlview8-dragableListServices-drgListObjItem-__item1

如果我只有对象，如何从列表中找到该项目？

Answer 1

正如我在评论中所解释的，通常最好根据模型数据调整 View 。

在下面的示例中，单击日历中的日期后，模型将使用 isSelected 属性进行更新，对于模型中的任何匹配日期，该属性都设置为 true :

handleCalendarSelect : function(oEvent) {
    // get the selected date
    const selectedDate = oEvent.getSource().getSelectedDates()[0].getStartDate().getTime();
    const oModel = this.getView().getModel();

    // get the listitems node from your model 
    const aListItems = oModel.getData().listitems;

    // where the magic happens:
    aListItems.map((obj) => {
        obj.isSelected = obj.date === selectedDate;
    });

    // update the model
    oModel.setProperty("/listitems", aListItems);
},

该列表随后会相应更新。

请参阅以下可运行示例:

sap.ui.controller("view1.initial", {
    onInit : function() {
        const oModel = new sap.ui.model.json.JSONModel({
            listitems: [
                {
                    "fname": "Tyetha",
                    "lname": "Puglisi",
                    "date": 1574031600000
                },
                {
                    "fname": "Tasheis",
                    "lname": "Monuteaux",
                    "date": 1574118000000
                },
                {
                    "fname": "Quincy",
                    "lname": "Landau",
                    "date": 1574204400000
                },
                {
                    "fname": "Danyell",
                    "lname": "Strange",
                    "date": 1574290800000
                },
                {
                    "fname": "Winston",
                    "lname": "Cook",
                    "date": 1574377200000
                },
                {
                    "fname": "Lilia",
                    "lname": "Willms",
                    "date": 1574463600000
                },
                {
                    "fname": "Sharful",
                    "lname": "Platt",
                    "date": 1574550000000
                },
                {
                    "fname": "Stan",
                    "lname": "Herrick",
                    "date": 1574636400000
                },
                {
                    "fname": "Denise",
                    "lname": "Tang",
                    "date": 1574722800000
                },
                {
                    "fname": "Samuel",
                    "lname": "Gilbertson",
                    "date": 1574809200000
                }
            ]
        });

        this.getView().setModel(oModel);
    },

    handleCalendarSelect : function(oEvent) {
        const selectedDate = oEvent.getSource().getSelectedDates()[0].getStartDate().getTime();
        const oModel = this.getView().getModel();
        const aListItems = oModel.getData().listitems;

        aListItems.map((obj) => {
            obj.isSelected = obj.date === selectedDate;
        });

        oModel.setProperty("/listitems", aListItems);
    },

    formatDate : function(fValue) {
        jQuery.sap.require("sap.ui.core.format.DateFormat");
        const oTimeFormat = sap.ui.core.format.DateFormat.getTimeInstance({pattern : "YYYY/MM/dd" });
        
        if (fValue) {
            return oTimeFormat.format(new Date(fValue));
        }
        return null;
    }
});

sap.ui.xmlview("main", {
    viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");

<script id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-xx-bindingSyntax="complex"
    data-sap-ui-libs="sap.m"></script>

<div id="uiArea"></div>

<script id="view1" type="ui5/xmlview">
    <mvc:View 
      controllerName="view1.initial"
      xmlns="sap.m"
      xmlns:u="sap.ui.unified"
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc">
        <App>
            <Page title="SAPUI5 demo">
                <content>
                    <HBox>
                        <u:Calendar select="handleCalendarSelect" />
                        <List mode="SingleSelect" items="{
                            path: '/listitems',
                            sorter: {
                                path: 'date'
                            }
                        }">
                            <items>
                                <StandardListItem selected="{isSelected}" title="{path : 'date', formatter : '.formatDate'}" description="{fname} {lname}" />
                            </items>
                        </List>
                    </HBox>
                </content>
            </Page>
        </App>
    </mvc:View>
</script>