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

我看到两个问题：

/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项目的索引并执行： /Overview/" + oArgs.OverviewIndex导致某些内容：Overview/0或Overview/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.

SapUI5 - 如何绑定对象Master-Detail页面？

1 个答案: