Popover inside on Table doesn't display data - sapui5

Question

I have this table component (sap.m.Table):
<Table
inset="false"
items="{
path: '/SelectExpenseDetails'
}" >
<headerToolbar>
<Toolbar>
<Button icon="sap-icon://cause" press="onBack" ariaLabelledBy="Atrás" />
<Button icon="sap-icon://message-information" press="showInfoExpenseItem" ariaLabelledBy="Atrás" />
<Title text="{i18n>GV.APROB.EXPENSES.detail.title}" level="H2"/>
</Toolbar>
</headerToolbar>
<columns>
<Column width="7em" >
<Text text="{i18n>GV.APROB.EXPENSES.detail.concepto.pago}" />
</Column>
<Column
width="4em"
demandPopin="true"
hAlign="Center">
<Text text="{i18n>GV.APROB.EXPENSES.detail.monto}" />
</Column>
<Column width="1.5em"
demandPopin="true"
hAlign="Center">
</Column>
</columns>
<items>
<ColumnListItem>
<ObjectAttribute text="{ExpensesCategory}" />
<ObjectNumber
number="{PlanAmount}"
unit="{masterExpense>/CurrencySymbol}" />
<Button icon="sap-icon://comment" press="showCommentsExpenseDetailItem" class="sapUiTinyMarginBegin"/>
</ColumnListItem>
</items>
</Table>
Function showCommentsExpenseDetailItem display the popover. Popover component is opened but it doen's display data:
Here is code:
showCommentsExpenseDetailItem: function(event){
var popover = sap.ui.xmlfragment("la.incloud.rva.aprobaciones.view.components.popover-comment-item-detail", this);
this.getView().addDependent(popover);
popover.openBy(event.getSource());
}
And this the XML fragment:
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core">
<Popover
showHeader="false"
placement="Bottom">
<TextArea value="{Comments}" growing="true" growingMaxLines="4" width="100%"/>
</Popover>
</core:FragmentDefinition>
I supposed that "{Comments}" is the right way of calling poperty of list items.
It seems that I'm wrong...

Answer 1

I assume that the Comments property belongs to an entity of the SelectExpenseDetails entity set. The problem that you are facing is in fact because of an incorrect binding path.
You have attached your popup as a dependent of the view itself. This means that all its relative bindings (like the one for the text area's value) will be resolved based on the binding context of the view. If the view is not bound to anything, the binding will not be resolved.
To go around this, you should bind the popup itself to the correct path, obtained from the item which was pressed. So you should adjust your event handler like so:
showCommentsExpenseDetailItem: function(event){
var popover = sap.ui.xmlfragment("la.incloud.rva.aprobaciones.view.components.popover-comment-item-detail", this);
this.getView().addDependent(popover);
popover.bindElement(event.getSource().getBindingContext().getPath());
popover.openBy(event.getSource());
}
Also, you are creating a new popup each time you press the button, you might want to reuse the popup instead (either create it declaratively in the view or store it as a property of the controller).