SapUI5 - 我如何绑定对象主从页面？

Question

我正在尝试将元素绑定并呈现到详细信息页面，但没有成功。

母版页显示良好并呈现数据。 但是当我想在详细信息页面上显示该项目时，数据不会显示。 *为了获取所有数据，我使用 API 请求

我不确定我做错了什么。

代码如下：

Controller.Overview.js

            var data =  {id: 19265, typeId: 5, foreignKeyId: 1, foreignKeyTextId: "316e2c71-d1d1-f73c-4696-70912d6cf240", value: 0, Name: "jim"}
                        ,{id: 19268, typeId: 5, foreignKeyId: 1, foreignKeyTextId: "316e2c71-d1d1-f73c-4696-70912d6cf240", value: 0, Name: "john"}

            var newArr2 = {"Overview" : data};
                        oModel.setData(newArr2);
                        oView.setModel(oModel);

            onListItemPressed : function(oEvent){
                var oItem, oCtx;

                oItem = oEvent.getSource();
                oCtx = oItem.getBindingContext();

                this.getRouter().navTo("overviewItem",{
                    OverviewId : oCtx.getProperty("OverviewId")
                });

            }

Overview.xml

       <List id="dataJS" headerText="dataJS" items="{/Overview}">
            <items>
                <StandardListItem
                    title="{foreignKeyTextId}"
                    iconDensityAware="false"
                    iconInset="false"
                    type="Navigation"
                    press="onListItemPressed"/>
            </items>
        </List>

controller.Overviewitem.js

            return BaseController.extend("com.sap.it.cs.itsupportportaladmin.controller.feedbackanalytics.OverviewItem", {

                    _formFragments: {},

                    onInit: function () {
                        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
                        oRouter.getRoute("overviewItem").attachMatched(this._onRouteMatched, this);
                    },

                    _onRouteMatched : function (oEvent) {
                        var oArgs, oView;
                        oArgs = oEvent.getParameter("arguments");
                        oView = this.getView();

                        oView.bindElement({
                            path : "/Overview(" + oArgs.OverviewId + ")",
                            events : {
                                change: this._onBindingChange.bind(this),
                                dataRequested: function (oEvent) {
                                    oView.setBusy(true);
                                },
                                dataReceived: function (oEvent) {
                                    oView.setBusy(false);
                                }
                            }
                        });
                    },

                    _onBindingChange : function (oEvent) {
                        // No data for the binding
                        if (!this.getView().getBindingContext()) {
                            this.getRouter().getTargets().display("notFound");
                        }
                    }

                });

OverviewItem.xml

            <mvc:View
                controllerName="com.sap.it.cs.itsupportportaladmin.controller.feedbackanalytics.OverviewItem"
                xmlns="sap.m"
                xmlns:mvc="sap.ui.core.mvc"
                xmlns:f="sap.ui.layout.form"
                busyIndicatorDelay="0">
                <Page
                    id="overviewPage"
                    title="{Name}"
                    showNavButton="true"
                    navButtonPress="onNavBack"
                    class="sapUiResponsiveContentPadding">
                    <content>
                        <Panel
                            id="employeePanel"
                            width="auto"
                            class="sapUiResponsiveMargin sapUiNoContentPadding">
                            <headerToolbar>
                                <Toolbar>
                                    <Title text="{OverviewId}" level="H2"/>
                                    <ToolbarSpacer />
                                    <Link text="{i18n>FlipToResume}" tooltip="{i18n>FlipToResume.tooltip}" press="onShowResume" />
                                </Toolbar>
                            </headerToolbar>
                        </Panel>
                    </content>
                </Page>
            </mvc:View>

Answer 1

我看到两个问题：

1. /Overview(" + oArgs.OverviewId + ")" 将无法作为您的模型使用数组，而不是根据 Controller.Overview.js 中的代码的对象：

       var data =  {id: 19265, typeId: 5, foreignKeyId: 1, foreignKeyTextId: "316e2c71-d1d1-f73c-4696-70912d6cf240", value: 0, Name: "jim"}
                   ,{id: 19268, typeId: 5, foreignKeyId: 1, foreignKeyTextId: "316e2c71-d1d1-f73c-4696-70912d6cf240", value: 0, Name: "john"}
   
       var newArr2 = {"Overview" : data};
                   oModel.setData(newArr2);
                   // this resolves to :
                   newArr2 = {"Overview" : [ {id: 19265...}, {id: 19268...} ]}
                   oView.setModel(oModel);
   

您必须找到 Clicked item 的索引并执行以下操作： /Overview/" + oArgs.OverviewIndex 导致类似：Overview/0 或 Overview/1 等。

1. 另外，您只将模型设置为您的主列表。

oView.setModel(oModel); 其中 oView 在 Controller.Overview.js 中。

请将模型设置为完整的拆分应用，以便绑定上下文正常工作。

============

讨论后更新：将数据存储为对象：

// id as the key. SO, you can easily fetch person.
var data = {
        "19265" : {id: 19265, typeId: 5, foreignKeyId: 1, foreignKeyTextId: "316e2c71-d1d1-f73c-4696-70912d6cf240", value: 0, Name: "jim"},
        "19268" : {id: 19268, typeId: 5, foreignKeyId: 1, foreignKeyTextId: "316e2c71-d1d1-f73c-4696-70912d6cf240", value: 0, Name: "john"}
    };

并将点击绑定设置为：

 oView.bindElement({
                        path : "/Overview/" + oArgs.OverviewId + "",
                        events : {
                            change: this._onBindingChange.bind(this),
                            dataRequested: function (oEvent) {
                                oView.setBusy(true);
                            }, ... rest of code.