SAPUI5 HTML template relative binding not working

Question

Code here: http://plnkr.co/edit/PfOgEDphwrnSXwatB6Yo?p=preview

I have a collection of products that I need to show on the screen. I load the JSON model and set it as a general model and I have an aggregation binding on a grid's content

var productTemplate = new sap.ui.view({
    viewName: "view.Product",
    type: sap.ui.core.mvc.ViewType.HTML
});    
grid.bindAggregation("content", "/", productTemplate);

The productTemplate is a html view as you can see:

<div id="mySimpleTemplate" data-type="text/x-handlebars-template">
    <h3>Product</h3>
    <b>{{text path="name"}}</b>
</div>

<script>
    sap.ui.template();
</script>

There are two issues:

The relative binding is not working. The name of the product is not displayed. If I use absolute binding {{text path="/3/name"}} the name will be displayed ok.
Second big issue is that the templating is only applied for the FIRST element. Afterwards the html view is interpreted as simple text

Where do I make the mistake? Also, the documentation on HTML template is quite limited on SAP official site. Can you provide some tutorials, examples links?

Thank you!

hirse hirse · Accepted Answer · 2015-08-06T14:56:05

First of all, I am no expert on templating in SAPUI5.

That being said, I think you are mixing two concept here: Views and Templates.

With my missing expertise, I can't really tell you about the ideas and concepts being this. However I did manage to get your example to work:

Rename your template file to view/Product.view.tmpl.
Remove the script tag in it, so it only contains the template.
In the Main view use new sap.ui.templateview("view.Product"); to create a TemplateView based on your template.

Please also see the updated Plunker.

SAPUI5 HTML template relative binding not working

1 Answers