Authors:Akira Sudoh, Ed Chatelain
Developers:Akira Sudoh, Ed Chatelain

dojox/mvc/parserExtension extends dojo/parser and/or dojox/mobile/parser so that data binding can be done for non-widgets. It reads data-mvc-bindings attribute in DOM node, so that properties in DOM node can be bound to data model or controller.


In the example below, the CSS class of <span> changes when user clicks on check box, as:

  • CSS class of <span> is bound to checked property in a dojo/Stateful (boldTextModel) that is boolean. It is one-way sync from data model to DOM node. When the value is true, the CSS class becomes boldText. Otherwise, the CSS class becomes empty.
  • Checked/unchecked state of the check box is bound do the same checked property in the dojo/Stateful (boldTextModel).

Also, the text in <span> changes when user makes a selection in combo box, as:

  • The text in <span> is bound to value property in a dojo/Stateful (titleModel).
  • The selected value of combo box is bound to the same value property in the dojo/Stateful (titleModel).
.boldText {
    font-weight: Bold;
], function(parser){
<script type="dojo/require">at: "dojox/mvc/at"</script>
<span data-dojo-id="titleModel"
 data-dojo-props="value: 'Foo'"></span>
<span data-dojo-id="boldTextModel"
 data-dojo-props="checked: false"></span>
    <span data-mvc-bindings="class: at(boldTextModel, 'checked').direction(at.from).transform({format: function(value){ return value ? 'boldText' : ''; }}),
                             innerText: at(titleModel, 'value')"></span>
    Choose text from:
    <select type="combo"
     data-mvc-bindings="value: at(titleModel, 'value')">
        <option value="Foo">Foo</option>
        <option value="Bar">Bar</option>
<div style="margin-top:8px;">
    The text should be bold:
    <input type="checkbox"
     data-mvc-bindings="checked: at(boldTextModel, 'checked')">

Table of Contents

Error in the documentation? Can’t find what you are looking for? Let us know!