0

In an XML view I have a JSON model bound to the page with the name 'foo'. The model's object has a 'name' field and child collection 'bar' (that has a 'code' field) that I want to show in a list. This is modeled as such:

JS Code

var foo = { name:'My Name', bar:[{ code:'Code 1' }, { code:'Code 2' }] }
var fooModel = new sap.ui.model.JSONModel(foo);
page.setModel(fooModel, 'foo');
page.bindElement('foo>/');

XML Markup

<Label text='{foo>name}'/>
<List items='{foo>bar}'>
    <StandardListItem title='{foo>code}'/>
</List>

Notice that the list item's values for the child 'bar' array are resolved via the name 'foo'. At least this works for me and I have found no other way to reference them in the list.

But the problem is how do I get the top-level 'foo' object data in my list-item also? Say I wanted to show the 'name' field also in the list items? In other words, is there a way to do the equivalent of the following, where I can reference the child collection by a different name? Is there some way to achieve this?

<List items="{ path:'foo>bar', name='bar' }">
    <StandardListItem title='{bar>code}' info='{foo>name}' />
</List>

1 Answer 1

0

You need to use an absolute path to bind the name property. Absolute means the complete path to the property within your model. The opposite is a relative binding path. Here you just use a property somewhere within your model and set a binding context to tell the runtime where your property is located within the model. You do this by using:

page.bindElement("foo>/");

Now the runtime will apply this information to all relative bindings against the model foo within this page. Therefore you can write foo>bar and the runtime automatically look up foo>/bar. However within the item aggregation this does not work, because the bar object does not have a property name. Therefore you need to use a absolute binding path to bind the property.

<List items="{foo>bar}">
    <StandardListItem title='{foo>code}' info='{foo>/name}' />
</List>

You find an explanation of the binding syntax for JSONModel in the documenation.

4
  • Thanks for the response. What worked for me was info'{foo>/name}', so the absolute-path technique worked. (I have edited my initial post with a #bindElement correction that likely accounts for the small discrepancy between your answer and what worked for me.)
    – dlgrasse
    Jan 20, 2017 at 19:46
  • Where this doesn't work though is when I have a list within a list. That is, say there is an array of 'foo' objects each with 'bar' arrays. If I bind the top List to as "items='{foo>/}'" and the 'bar' inner list with "items='{foo>bar'}", then I'm not able to reference the parent object (and I've tried various permutations of the answer that you gave). If this is unclear, I'll edit my original post to include this second example.
    – dlgrasse
    Jan 20, 2017 at 19:51
  • Are you sure that you are using page.bindElement("foo>/"). It should be "foo>/foo" to point to your object foo inside the model.
    – matbtt
    Jan 20, 2017 at 20:17
  • I think I see your confusion. In my post I said the JSON object is foo:{ stuff }. I was simply referring to my object by a name, not that the "foo:" text itself was inside the object. I'll edit my post to clear that up.
    – dlgrasse
    Jan 20, 2017 at 20:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.