You can inspect the generated AngularJS and MVC bindings for your ViewModels in MDriven Turnkey when you build or override a user interface.

Open the binding reference

MDriven Turnkey exposes a development view that shows suggested bindings for the ViewModels available in the application.

1. Open your Turnkey site.
2. Browse to https://<yoursite>/Turnkey/Development?view.
3. Alternatively, open the corresponding link in the Portal.
4. Select or locate the ViewModel you are working with.
5. Copy the suggested binding that matches the target user interface technology: AngularJS or MVC.

Replace <yoursite> with the address of your own site.

Use the suggested bindings

The development view is a reference for the data that Turnkey sends to the browser and for the bindings that connect UI elements to the current ViewModel. Use it when you need to create or change markup rather than guessing property names or binding expressions.

For example, when you replace a standard template with markup of your own, use the binding suggestion for the relevant ViewModel attribute to place its value in a label, input, SVG element, or another HTML element. The generated UI data includes the basic rules configured on the server, such as whether a field is text or numeric and ViewModel rules such as read-only and show expressions.

The suggestions are especially useful when you:

• create an EXT_Component template;
• override a Turnkey page with your own cshtml;
• need to inspect the client-side representation of a ViewModel attribute; or
• compare the AngularJS binding with the MVC rendering approach.

Choose the correct UI technology

Use the binding family that matches the page you are editing.

Target	Use the development view for	Related guidance
AngularJS Turnkey page or component	Suggested AngularJS bindings for ViewModel data and UI rules.	AngularJS click handling, finding Angular scope from JavaScript
MVC page	Suggested MVC bindings for server-side MVC rendering.	Serverside Turnkey and MVC functioning

Do not assume that an AngularJS binding can be used unchanged in MVC, or that an MVC rendering expression can be used unchanged in an AngularJS template.

Apply a binding in a custom UI

When you customize a component or page, keep the ViewModel as the source of truth.

1. Find the ViewModel attribute in the development view.
2. Copy the suggested binding for AngularJS or MVC.
3. Add the binding to the HTML element that presents or edits that attribute.
4. Load the page and verify that the element displays the current ViewModel value.
5. If the element is editable, change its value and verify that the ViewModel receives the change.

For a read-only presentation, a binding can be placed on an element such as a label or SVG element. For an editable value, use the suggested binding on the appropriate input element so AngularJS can participate in the change handling.

When you override a full page, see View/Page override. When you add JavaScript that must load before AngularJS compiles the application, use AppWideAngularScriptIncludes.

Format displayed values

Bindings provide the value; formatting controls how that value is displayed. Configure formatting on the ViewModel column with tagged values rather than hard-coding display transformations in each template.

For AngularJS, use the StringFormatAngular tagged value. It is appended to the binding as an Angular filter and is best suited to read-only values. For example, number:2 displays a number with two decimals, while numberhash:2 uses a minimum of two decimals and can show additional non-zero decimal places. See Text formatting for the supported strategies and MVC equivalents.

Handle interactions and custom JavaScript

A binding does not make an arbitrary JavaScript function available to AngularJS. If a button must act on ViewModel data, use an AngularJS directive when the function needs the current Angular scope and data context. See Ng-click (ngClick) not working for the directive pattern and the limitations of calling functions outside the scope.

If external JavaScript receives a callback and must update a ViewModel value, retrieve the current ViewModel root or update an input and dispatch its change event so AngularJS handles the change. Follow Finding angular scope from JavaScript rather than bypassing the binding flow.

For list drag and drop, do not implement a separate binding convention in the template. Add the DragSource or DropTarget tag with the value True on the ViewModel class, as described in Dragging and DragDrop Actions.

Troubleshoot

If a value does not appear or does not update:

1. Confirm that you used the AngularJS or MVC suggestion for the page technology.
2. Confirm that the ViewModel attribute name and binding expression match the development view.
3. Check whether a ViewModel show expression or read-only expression affects the rendered control.
4. For custom JavaScript, confirm that the code runs in the intended AngularJS scope; do not expect ng-click to call a global function that is outside that scope.
5. For JavaScript loaded by a component, confirm that its include file is loaded early enough. On Linux, the app-wide include filename is case-sensitive and is accessible as appwideangularscriptincludes.html.

See also

• Documentation:View/Page override
• Documentation:Text formatting
• Documentation:Ng-click ( ngClick ) not working
• Documentation:Finding angular scope from javascript
• Documentation:AppWideAngularScriptIncludes