ExtJS 5 data binding and debugging when it does not work

[pkellner]

Skip next 3 paragraphs if impatient:

First, let me say that I love the new declarative data binding. I'm constantly amazed how I can do things in a couple lines of declarative code that before would have been an ugly ref query listener fest.

OK, now that the honey moon is kind of over, I'm building some more non-demo apps and I'm finding it very difficult to figure out why things don't work when it looks like they should. I'm not running into any ExtJS 5 instabilities or issues that I know of, it's just the space between my ears that makes mistakes.

Sad to admit, but one manager I worked for once told me that I should spend more time in design and less time in the debugger. Well, old dog, not likely to learn that new trick. I just like to do my design by building iterative prototypes so I can "feel" my apps rather than just imaging them.

My problem is that when a bind does not work, nothing gets displayed. No console errors, no warnings, just nothing. Could someone suggest how to debug bind problems? I'd love the new data binding so much more if I could quickly go from non-working to working code. For example, the issue I just ran into was I was building a simple template bound to the selected row. I mis spelled my speakersList variable and of course it did not work. No error, just not working. Besides debugging by inspection, what is a better way to figure out the issue?

Thanks, -Peter

 {
                    xtype: 'panel',
                    tpl: [
                        '<tpl for=".">',
                        '    {userFirstName} {userLastName}',
                        '</tpl>',
                        ''
                    ],
                    bind: {
                        data: '{selectedSession.speakersList}'
}

[evant]

We have a tool, the bind inspector that exists. If you open the ticket app and double click on the Sencha logo you'll see it.

It still needs some work, but it's a good starting point.

[alfonso.nishikawa]

We have a tool, the bind inspector that exists. If you open the ticket app and double click on the Sencha logo you'll see it.

It still needs some work, but it's a good starting point.

Bind-inspector-what?

I face the same difficulties

[llamerr]

>>Bind-inspector-what?

Same problem here and I suppose there will be no answer.

[llamerr]

using `data` instead of `formulas` worked fine, bindings now working, when I update that data item:

/*formulas: {
hasSubaspects: { ... }
}*/
data: {
hasSubaspects: false
},

PS: I used same formula (with different, unique name) in other place, and bindings worked there, so formula itself is correct