Data binding

declarative rendering of data

Overview

Every app needs to present data on screen for the user. While the developer can easily write a code to read data from a data storage and "manually" render it on the screen, Dynamics Mobile SDK provides a faster and more scalable approach. This approach is called "data-binding" and allows the developer to "define" the way the data must be rendered on the screen by using declarative expressions.

Example

So let us have the following view:

@View()
class MyView {
   public customerName: string;
   public customerAddress: string;
   public customerAge: number
   
   
   public async load(): Promise<void> {
      this.customerName ='MyCustomerName1';
      this.customerAddress ='MyCustomerAddress1';
      this.customerAge =35;
   }
}

Now let us define the view's UI, where we will render the

<div class="page">
    <div class="page-content">
        <div class="list">        
            <button class = "button" data-bind="click: test" id="btnTest">Run DMS SPT1</button>            
            <ul>
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title">
                                <div class="item-header" data-bind="text: customerName"></div>
                                <span data-bind="text: customerAddress"></span>
                            </div>
                        </div>
                    </div>
                </li>
             </ul>
          </div>
      </div>
</div>                             

Take a closer look on line #10. We are defining the following expression: <div class="item-header" data-bind="text: customerName"></div>. The data-bind attribute defines that this DIV's text element must be "bound" to a variable called customerName. The engine will then lookup for a variable "customerName" in the MyView class , and will render the div with text which is contained in the customerName variable.

We are doing the same on line #11 and bind the span element's text to the variable customerAddress.

What we need to make sure here is that we have those two variable exposes as members of the view.

The data-binding expressions in Dynamics Mobile are based on the knockoutjs library Checkout the knockoutjs documentation page for more info

Cheat Sheet

Expression	Description
data-bind="text: myVar"	Replaces the inner content of the element with the value of myVar member. Throws exception if myVar is undefined or null
data-bind="text: $data.myVar"	Safely replaces the inner content of the element with the value of myVar member. Does not throw exception if myVar is undefined or null
data-bind="html: myVar"	Replaces the inner content of the element with the value of myVar member. Throws exception if myVar is undefined or null
data-bind="value: myVar"	used with <input> element to render the value in a textbox and to write back the changes in myVar
data-bind="visible: myVar"	shows the element only if myVar variables resolves to true
data-bind="hidden: myVar"	hides the element only if myVar variables resolves to true
data-bind="click: myMethod"	will call method myMethod when the user clicks over the html element