Step 3: Create Property Binding

Although there is no visible difference, the text on the screen is now derived from model data.

Preview

Figure 1: Screen with text derived from various sources (No visual changes to last step)

Coding

You can view and download all files in the Explored app in the Demo Kit under Data Binding - Step 3.

webapp/index.html

...
    <script>
      // Create a new JSON model object
      var oModel = new sap.ui.model.json.JSONModel({
  		greetingText : "Hi, my name is Harry Hawk"
      });

      // Assign the model object to the SAPUI5 core
      sap.ui.getCore().setModel(oModel);

      new sap.m.Text({ text : "{/greetingText}" })
        .placeAt("content");
    </script>
...

The text property of the sap.m.Text control is set to the value {/greetingText}. The curly brackets enclosing a binding path (binding syntax) are automatically interpreted as a binding. These binding instances are called PropertyBindings. In this case, the control's text property is bound to the greetingText property at the root of the default model, as the slash (/) at the beginning of the binding path denotes an absolute binding path.