Can't bind component tpl data to ViewModel?

[estesbubba]

I have a component with a tpl and I want to bind its data to my ViewModel. I tried this and it doesn't appear to work. Am I missing something or is this not possible with components? My dataviews on the page page are working just fine with the bindings so I know the data is there.

                xtype: 'component',
                cls: 'w-job-info',
                tpl: [
                    '<div class="w-row">',
                        '<div class="w-left">',
                            '<span class="w-label">Job Ref</span>',
                            '<span class="w-value">{jobRef}</span>',
                        '</div>',
                        '<div class="w-left">',
                            '<span class="w-label">Process Ref</span>',
                            '<span class="w-value">{procRef}</span>',
                        '</div>',
                        '<div class="w-right">',
                            '<span class="w-label">Job State</span>',
                            '<span class="w-value">{jobState}</span>',
                        '</div>',
                    '</div>'
                ],
                bind: {
                    data: {
                        jobRef: '{record.prociRef}',
                        procRef: '{record.procRef}',
                        // jobState: Wp.base.util.DisplayState.getDisplayJobState(record.get('state'))
                        jobState:  '{state}'
                    }
                }

[mitchellsimoens]

This simple fiddle is able to bind to a record much like what you are trying to do I believe:

[estesbubba]

Found my problem which was the 'state' binding which is a formula I hadn't written yet. IIRC bindings don't happen until all the needed data is available which my formula obviously wasn't. Thanks for your help and here's the Fiddle that shows what my problem was with a missing formula.https://fiddle.sencha.com/#fiddle/1f69

[EPV]

mitchell (or any other volunteer),

It's tempting to try to bind the entire record.data to the tpl (but that doesn't work).
Is there something obvious that I'm missing?

   launch : function() {
        new Ext.Component({
            renderTo  : Ext.getBody(),
            itemId:'mycomp',
            viewModel : {
                data : {
                    record : new MyModel({
                        foo : 'bar'
                    })
                }
            },
            tpl       : '<div style="color: #f00;font-weight: bold;">{foo}</div>',
            bind      : {
                data : '{record.data}'
            }
        });
    }

Thanks / E

[estesbubba]

My guess is behind the scenes the binding is doing a record.get('data') which won't work. You could write a formula to do it like this:

[mitchellsimoens]

Ext JS will be smart enough to know that you want the record's data not the record if you have data : '{record}':

[EPV]

Great, thanks both of you!

[mattjenkins]

Ext JS will be smart enough to know that you want the record's data not the record if you have data : '{record}':

But not in Modern.

[mitchellsimoens]

But not in Modern.

Just a bit different:

[LuciaT]

Hi, I´m trying to do something similar but with a list-component that already has a store bind, but in my Xtemplate I need to bind a value too (ids in the record), My files are:
My view :

  
{
    xtype: 'list',
    bind: {
        data : '{record}',
        store: '{contributorsList}'
    },
        itemTpl: contributorsTpl
    }
_________


var contributorsTpl = new Ext.XTemplate(
    "<tpl if= '[this.isExpert(values.contributorId,data.ids)]' >",
      "<div class=\"experts-list\">" ,
        "<img src=\"{contributorImage}\">",
    "</div>",
    "</tpl>",
    {
        isExpert(ids,conIds){
        //do somthing with the two values the one that is in my store(data.record.ids) 
        //and the value in my viewmodel (values.contributorId)
        }
   }
);

My view model:

 
data:{
        record:{
            ids: {"3","1"}
        }
    }

But I can´t get the value in my view model, I'am using Extjs 6.5.2 Modern-Triton please help me.