require(['dojo/topic', 'dojo/query', 'dojo/Stateful', 'dojo/_base/declare'], function(topic, query, Stateful, declare) {

    var Controller = declare([Stateful], {
        accounts: {
            account1: {
                change: null,
                value: null
            },
            account2: {
                change: null,
                value: null
            }
        },
        otherData: {
            foo: null,
            bar: null
        }

    });

    var c = new Controller;

    // the controller will publish a data refresh event as soon as it
    // receives an update
    c.watch('accounts', function(prop, oldValue, newValue) {
        console.log(prop, 'prop changed. Publishing data/refresh...');
        topic.publish('data/accounts/refresh', newValue);
    });

    // client modules interested in particular data will subscribe
    topic.subscribe('data/accounts/refresh', function(data) {
        var accountValue = data.account1.value;
        query('.account-value').forEach(function(element) {
            element.innerHTML = '$' + accountValue;
        });
    });

    // a hook to inform the controller that data has changed
    topic.subscribe('controller/accounts/update', function(data) {
        console.log('controller/accounts/update', data);
        c.set('accounts', data);
    });


    query('#update-controller').on('click', function() {
        topic.publish('controller/accounts/update', getRandomData());
    });

    // we are not currently planning to update the controller
    // from inline data, but this is a possibility. on the other hand,
    // we think it would be a good idea to put the initial data
    // for a module inside a script tag instead of in data-dojo-props
    query('#load-inline-data').on('click', function() {
        var json = query('#bap .data-store')[0].innerHTML;
        var data = eval('(' + json + ')');
        topic.publish('controller/accounts/update', data.accounts);
    });
});

function getRandomData() {
    // simulates the data we will receive from the server on a fixed interval
    return {
        account1: {
            change: Math.floor(Math.random() * 1000000),
            value: Math.floor(Math.random() * 10000)
        },
        account2: {
            change: Math.floor(Math.random() * 1000000),
            value: Math.floor(Math.random() * 10000)
        }
    };
}

Setting Validate Copy Format

.module {
  border: 1px solid #333;
  width: 200px;
  height: 200px;
  float: left;
  margin: 10px;
}

Setting Validate Copy Format

<div id="sbm" class="module">
  Account 1 Value: <span class="account-value">$734200</span>
</div>
<div id="bap" class="module">
  Account 1 Value: <span class="account-value">$734200</span>
  <script type="application/json" class="data-store">
  {
    "accounts": {
      "account1": {
        "change": 2000,
        "value": 999999
      },
      "account2": {
         "change": 2422,
         "value": 202393
      }
    }
  }
  </script>
</div>

<p>
<button id="update-controller">Update Controller</button>
<small>(will happen both at <strong>page load</strong>
and on a <strong>fixed interval</strong>)</small>
</p>

<p>
  <button id="load-inline-data">Load Inline Data</button>
</p>

Copy Format

Download