ExtJS 5 Bind ViewModel To Template

The simplest things can often be aggravating to get right.  I often find that when something does not work (especially in ExtJS 5 using View Model and Bind) that I need to make the simplest example to prove my understanding to myself.  I thought I would share a very simple yet powerful example of how to bind data from a ViewModel to an xtemplate in ExtJS 5.

There are many other things you can do with databinding including modeling selected row in a grid as well as nice integration with formulas.  The below example is just a very simple case that proves it works which is often all I need.

Notice that in the code below I’ve created a very simple viewport with just one item.  The two big takeaways are:

The data must be enclosed in the bind attribute

The tpl (template) is not in a bind attribute

Hope this helps someone struggling also.

Ext.onReady(function() {
    Ext.create({
        xtype: 'viewport',
        viewModel: {
            data: {
                viewModelAddress: '200 main street'
            }
        },
        items: [{
            bind: {
                data: {
                    address: '100 main street',
                    viewModelAddress: '200 main street'

                }
            },
            tpl: 'address: {address}<br/>viewModelAddress: {viewModelAddress}'
        }],
        renderTo: Ext.getBody()
    });
});

https://fiddle.sencha.com/#fiddle/9is