How to implement DataBinding in SAPUI5 when using XML-Views?

Question

in SAPUI5 assigning a model or data binding to a table or something is very easy, when using JS-Views. But how can I do this, when using XML-Views?

<?xml version="1.0" encoding="UTF-8" ?>
<core:View
    xmlns:core="sap.ui.core"
    xmlns="sap.ui.commons"
    xmlns:table="sap.ui.table"
    xmlns:html="http://www.w3.org/1999/xhtml"
    controllerName="view.Main">
    <Panel text="Hello World from an XML view">
        <Button text="Button" press="doSomething"></Button>
        <table:Table width="100%" visibleRowCount="5" selectionMode="Single" editable="false">
            <table:title><Label text="Wochentage"></Label></table:title>
            <table:Column>
                <Label text="ID" />
                <table:template><TextField value="{id}"></TextField></table:template>
            </table:Column>

        </table:Table>
    </Panel>
</core:View>

I dont want to give the table a fix id attribute and implement it by calling

sap.ui.getCore().getElementById("idProductsTable").setModel(

            demoJSONModel);

in the controller ... :(

Answer 1

You would normally set a model on a control (either the table directly, or one of its parents) in the controller. So I'm going to assume you're wondering about the latter part of your initial statement: "assigning a data binding to a table ... when using XML-Views".

All you have to do is express the aggregation as an XML attribute. So if your demoJSONModel looked like this:

var demoJSONModel = new sap.ui.model.json.JSONModel({
  data : [
    { id : 42 },
    { id : 1.618 },
    { id : 3.14 }
  ]
});

then you could set the binding for the table's 'rows' aggregation like this:

<table:Table
  width="100%"
  visibleRowCount="5"
  selectionMode="Single"
  editable="false"
  rows="{/data}">

I've put together an example in JSBin that shows this.