Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Class-Databinding in XML-Views not working

See original GitHub issue

I can’t set new CSS-classes dynamically via data-binding to a list item. It renders the path as a name directly in the class attribute. 20-05-2014 14-11-20

For reproduction I made an easy example:

index.html

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" type="text/javascript"
            id="sap-ui-bootstrap"
            data-sap-ui-libs="sap.m, sap.ui.commons"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-xx-bindingSyntax="complex">
        </script>
    </head>
    <body class="sapUiBody">
        <div id="content"></div>
    </body>
    <script>
        jQuery.sap.registerModulePath("page", "page/");
        sap.ui.xmlview("app", "page.App").placeAt("content");
    </script>
</html>

App.view.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE View>
<mvc:View controllerName="page.App" xmlns:m="sap.m" xmlns:core="sap.ui.core"
          xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml">
    <m:App>
        <m:Page title="My App">
            <m:content>
                <m:List items="{listData>/entries}">
                    <m:items>
                        <m:StandardListItem title="{listData>title}" class="{listData>className}" />
                    </m:items>
                </m:List>
            </m:content>
        </m:Page>
    </m:App>
</mvc:View>

App.controller.js

sap.ui.controller("page.App", {
    onInit: function () {
        var listData = {
            entries: [
                {title: "Entry 1", class: "css1"},
                {title: "Entry 2", class: "css2"},
                {title: "Entry 3", class: "css3"}
            ]
        };

        var listDataModel = new sap.ui.model.json.JSONModel();
        listDataModel.setData(listData);
        this.getView().setModel(listDataModel, "listData");
    }
});

Issue Analytics

State:
Created 9 years ago
Reactions:1
Comments:7 (4 by maintainers)

Top GitHub Comments

1reaction

sirioncommented, May 20, 2014

Status is semantic information, so this definitely belongs in the model.

Here is an example of one way you could solve this: http://jsbin.com/sefiw/5/edit?html,output

1reaction

sirioncommented, May 20, 2014

“class” is not a property of the control, thus it cannot be used in databinding.

Usually you do not want styling information in your model as it defeats the purpose of the MVC pattern.

One workaround for your exact behavior would be to extend the used control and add a property that you can render any way you want in your own renderer, What problem do you want to solve here? There are usually better ways.

Best regards, Jens

Top Results From Across the Web

Applying Data Binding for Views | CodePath Android Cliffnotes

Troubleshooting · Make sure you have the proper dataBinding true in gradle and trigger "Sync with Gradle" · Open the layout file and...

android - Data Binding class not generated - Stack Overflow

Create a fresh name for the layout to make sure it can be generated. This solved my issue, where I had a layout...

View Binding - Android Developers

... Work with observable data objects · Generated binding classes ... Monitor connectivity status and connection metering · Parse XML data.

Migrate from Data Binding to View Binding | Trendyol Tech

xml , ViewBinding will generate the ActivityMainBinding.java class. Creates this class by adding “Binding” to the end of the Layout name. And we ......

Everything You Should Know About Binding in Android

View binding doesn't support layout variables or layout expressions, so it can't be used to declare dynamic UI content straight from XML layout...