Styjun

I have created a table with a drop down control. I am adding rows dynamically in my table. I am trying to bind my table column of drop down with a JSONModel but there are some challenges in there.

var oTable = this.getView().byId("myTable");
this.items.push(
 item1: "",
 item2: "",
 item3: ""
);
this.oModelJson.setData(this.items);
this.oTable.setModel(this.oModelJson);
this.oTable.bindRows("/");

Now, my item1 is the drop down as declared in the view. After the end of above code, I am trying to bind my table drop down using following technique: my JSONModel is global and it has data. I am able to successfully bind my drop down outside of table but when I move my drop down inside the table, it is not binding.

var oDDL = this.byId("DropDown");
var oDDLTemplate = new sap.ui.core.Item(
 key: "key",
 text: "Text"
);
oDDL.setModel(this.oJson);
oDDL.bindAggregation("items", "/results", oDDLTemplate);

Here is my view, Table

<t:Table id="myTable"
 width="auto"
 noDataText="No Record Found"
 busyIndicatorDelay="detailView>/lineItemTableDelay"
 class="sapUiResponsiveMargin"
 selectionMode="MultiToggle"
 visibleRowCount="5"
>
 <t:extension>
 <l:HorizontalLayout>
 <Button icon="sap-icon://add" text="Row" press="addRow"/>
 <Button icon="sap-icon://delete" text="Row" press="fDeleteRow"/>
 </l:HorizontalLayout>
 </t:extension>
 <t:columns>
 <t:Column width="16rem">
 <Text text="Item 1"/>
 <t:template>
 <ComboBox id="DropDown"></ComboBox>
 </t:template>
 </t:Column>
 <t:Column width="8rem">
 <Text text="Item 2"/>
 <t:template>
 <ComboBox id="txt_itm2" ></ComboBox>
 </t:template>
 </t:Column>
 <t:Column width="8rem">
 <Text text="Item 3"/>
 <t:template>
 <ComboBox id="txt_itm3" ></ComboBox>
 </t:template>
 </t:Column>
</t:Table>

Here is a minimal example: https://plnkr.co/edit/8YvXxk?p=preview

In my example above, the rows are initially empty ([]). The binding definitions can stay in the view:

<t:Table rows="/">
 <t:extension>
 <OverflowToolbar>
 <ToolbarSpacer />
 <Button
 icon="sap-icon://add"
 press=".onAddPress"
 />
 </OverflowToolbar>
 </t:extension>
 <t:columns>
 <t:Column>
 <Text text="Item 1" />
 <t:template>
 <ComboBox items="items1">
 <core:Item
 key="key"
 text="text"
 />
 </ComboBox>
 </t:template>
 </t:Column>
 <!-- ... -->
 </t:columns>
</t:Table>

By this, I just need to enhance the existing model data when the user presses on the + button instead of calling bindRows or bindAggregation every time.

onAddPress: function() 
 const model = this.getOwnerComponent().getModel(); // JSONModel
 const currentRows = model.getProperty("/");
 const newRows = currentRows.concat(this.createEntry());
 model.setProperty("/", newRows);
,