无法在详细信息页面中显示RowRepeater选择的第一行的详细信息

时间:2019-02-14 13:49:45

标签: data-binding sapui5 binding-context

我有一个sapui5应用程序,我们已将sapui5应用程序版本从1.44升级到1.56。

在此应用程序中,我们使用RowRepeater控件。我们有两种视图,一种是“ Master”视图,另一种是“ Details”视图。

每当我在主视图中选择一行时,所选行的相应详细信息都应显示在详细信息视图中。

在详细视图中,我们使用两个组合框进行下拉菜单以及一些“文本”控件。

问题:

功能性在1.44版本中正常运行,但升级后,功能性除第一行外均正常运行。 每当我选择第一行时,行详细信息都会正确显示,但是组合框不会显示所选值。我想它们正在重置为默认值。

请在下面找到代码:

Master.view.xml:

<mvc:View controllerName="com.test.components.notes.controller.Master" xmlns:mvc="sap.ui.core.mvc" xmlns:layout="sap.ui.layout"
xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:commons="sap.ui.commons" xmlns:html="http://www.w3.org/1999/xhtml">
<ScrollContainer height="30rem" width="100%" horizontal="false" vertical="true" focusable="false">
    <commons:RowRepeater id="notes" design="Transparent" numberOfRows="50" sort=".rowRepeatSort">
        <commons:rows>
            <layout:HorizontalLayout id="RowTemp" class="npcRowRepeat">
                <commons:Image class="npcStatusBar"></commons:Image>
                <layout:VerticalLayout>
                    <commons:TextView text="{Subject}" width="18rem" wrapping="false" class="formLabel" design="Bold"/>
                    <commons:TextView text="{path : 'Text', formatter: '.formatString'}" width="12rem" wrapping="false" class=" formLabel"/>
                </layout:VerticalLayout>
                <layout:VerticalLayout id="TextTypeRow">
                    <commons:TextView text="{ImpactDesc}" width="12rem" wrapping="false" class="formLabel" design="Bold"/>
                    <commons:TextView text="{TextType}" width="12rem" wrapping="false" class="formLabel"/>
                </layout:VerticalLayout>
                <layout:VerticalLayout>
                    <commons:TextView text="{ path : 'DateSystem', formatter: '.formatDate' }" width="5rem" wrapping="true" class="formLabel"/>
                </layout:VerticalLayout>
            </layout:HorizontalLayout>
        </commons:rows>
    </commons:RowRepeater>
</ScrollContainer>

Detail.view.xml:

<mvc:View controllerName="com.test.components.notes.controller.Detail" xmlns="sap.m" xmlns:form="sap.ui.layout.form" xmlns:core="sap.ui.core" xmlns:commons="sap.ui.commons" xmlns:rich="sap.ui.richtexteditor" xmlns:mvc="sap.ui.core.mvc">
<form:Form class="editableForm" id="NOTES_FORM">
    <form:title>
    </form:title>
    <form:layout>
        <form:ResponsiveGridLayout columnsM="1" columnsL="1" labelSpanL="6" labelSpanS="4" labelSpanM="6" emptySpanL="2" emptySpanM="2" emptySpanS="2" />
    </form:layout>
    <form:formContainers>
        <form:FormContainer>
            <form:formElements>
                <form:FormElement>
                    <form:fields>
                        <commons:Label id="typeLabel" text="{i18n>Type_Form}" class="formLabel" required="true"  />
                        <ComboBox id="type" class="formLabel" placeholder="{i18n>SELECT_NOTE_TYPE}"  selectedKey="{TextId}"  selectionChange=".onValidateForm" editable="true" width="14.5rem">
                            <core:Item id="typeItem" key="{TextId}" text="{TextType}" />
                        </ComboBox>
                    </form:fields>
                </form:FormElement>
            </form:formElements>
        </form:FormContainer>
        <form:FormContainer>
            <form:formElements>
                <form:FormElement>
                    <form:fields>
                        <commons:Label id="priorityLabel" text="{i18n>Priority_Form}" class="formLabel" required="true" />
                        <ComboBox id="priority"  placeholder="{i18n>SELECT_NOTE_PRIORITY}" selectedKey="{Impact}" selectionChange=".onValidateForm" class="formLabel" width="14.5rem">
                            <core:Item id="impactItem" key="{Impact}" text="{Description}" tooltip="{Description}" />
                        </ComboBox>
                    </form:fields>
                </form:FormElement>
            </form:formElements>
        </form:FormContainer>
        <form:FormContainer>
            <form:formElements>
                <form:FormElement>
                    <form:fields>
                        <commons:Label id="subjectLabel" text="{/#Notes/Subject/@sap:label}" class="formLabel" required="true" />
                        <Input id="subject" value="{Subject}" placeholder="{i18n>ENTER_NOTE_SUBJECT}"   editable="true" class="formLabel" width="14.5rem" maxLength="40" liveChange="onSubjectLC" valueStateText="Maximum 40 Characters Allowed" />

                    </form:fields>
                </form:FormElement>
            </form:formElements>
        </form:FormContainer>

    </form:formContainers>
</form:Form>

Master.controller.js:

sap.ui.define(["com/test/library/common/controller/BaseController",
    "sap/ui/commons/TextView",
    "sap/ui/commons/RowRepeaterFilter",
    "sap/ui/commons/RowRepeaterSorter"
],
function(BaseController, Dialog, TextView, RowRepeaterFilter, RowRepeaterSorter, Sorter, Filter, FilterOperator) {
    "use strict";
    return BaseController.extend("com.test.components.notes.controller.Master", {
        _sChannelId: "notes",
        _oMainController: "",

        onInit: function(oEvent) {
            BaseController.prototype.onInit.apply(this);
            this.oNotes = this.oView.byId("notes");
            this.oBundle = this.getComponent().getModel("i18n").getResourceBundle();
            this.oComponent = this.getOwnerComponent();
            this.oComponent.oNotesMainController = this;
            this.oComponent.oNotesRepeater = this.oNotes;

            var that = this;

            if (!this.oTemplate) {
                this.oTemplate = this.byId("RowTemp").clone();

                var fnOnClick = function(oEvent) { 
                    var oCreateMode = this.oComponent._oViewModel.getProperty("/CreateMode");
                    if (oCreateMode === false) {
                        that._oModel.deleteCreatedEntry(that._oContext);
                    }

                    //Higlight selected row 
                    var sSelectedRowId = jQuery(oEvent.target).closest(".npcRowRepeat").attr("id");
                    var oSelectedRow;

                    this.oNotes.getRows().forEach(function(oRow, index) {
                        var bSelected = sSelectedRowId === oRow.getId();
                        oRow.toggleStyleClass("npcSelectedRow", bSelected); 

                        if (bSelected) {
                            oSelectedRow = oRow;
                        }
                    });

                    this.onRowSelect(oSelectedRow.getBindingContext());

                }.bind(this);

                this.oTemplate.addEventDelegate({
                    onclick: fnOnClick
                });

                this.oTemplate.addEventDelegate({
                    onAfterRendering: function() {
                        var oFirstRow = that.oNotes.getRows()[0].getId();
                        var oStyle = that.oNotes.getRows()[0].aCustomStyleClasses.indexOf("npcSelectedRow");
                        if (oFirstRow && oStyle === -1 && oUpdate == false) {
                            $("#" + oFirstRow).trigger("click");
                        }
                    }
                });
            }

        },
        onRowSelect: function(oContext) {
            this.getEventBus().publish(this._sChannelId, "refreshNotesForm", {
                context: oContext,
            });
        }

     });
});

Detail.controller.js:

sap.ui.define([
    "com/test/library/common/controller/BaseController",
    "sap/m/MessageToast"
], function(BaseController, MessageToast) {
    "use strict";

    return BaseController.extend("com.test.components.notes.controller.Detail", {
        _sNotesCollection: "Notes",

        _sChannelId: "notes",
        _oMainController: "",

        /**
         * on init
         *
         */
        onInit: function() {
            BaseController.prototype.onInit.apply(this);
            this._oForm = this._oView.byId("NOTES_FORM");
            this.oComponent = this.getOwnerComponent();

            this._oBundle = this.getComponent().getModel("i18n").getResourceBundle();

            var that = this;



            if (!this.oTemplate) {
                this.oTypeTemplate = this.byId("typeItem").clone();
                this.oImpactTemplate = this.byId("impactItem").clone();
            }

            this.getEventBus().subscribe("notes", "refreshNotesForm",
                function(sChannelId, sEventId, oData) {

                    that._oContext = oData.context;
                    that._oForm.setBindingContext(oData.context);
                    that.currentValueNotes = that.getView().byId("notes").getValue();


                });
        }

    });
});

详细信息页面中RowRepeater的第一个选定行的输出图像:

enter image description here

详细信息页面中RowRepeater的第二个选定行的输出图像(运行正常):

enter image description here

请指导我。

0 个答案:

没有答案