Results 1 to 10 of 10

Thread: Can't bind component tpl data to ViewModel?

  1. #1
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    631
    Answers
    10

    Default Answered: Can't bind component tpl data to ViewModel?

    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.

    Code:
                    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}'
                        }
                    }

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


  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448
    Answers
    3997

    Default

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

    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  4. #3
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    631
    Answers
    10

    Default

    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

  5. #4
    Sencha Premium Member EPV's Avatar
    Join Date
    Dec 2010
    Location
    Sweden
    Posts
    361
    Answers
    37

    Default

    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?

    Code:
       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

  6. #5
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    631
    Answers
    10

    Default

    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:


  7. #6
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448
    Answers
    3997

    Default

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

    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  8. #7
    Sencha Premium Member EPV's Avatar
    Join Date
    Dec 2010
    Location
    Sweden
    Posts
    361
    Answers
    37

    Default

    Great, thanks both of you!

  9. #8
    Sencha Premium User
    Join Date
    Feb 2012
    Posts
    82
    Answers
    1

    Default

    Quote Originally Posted by mitchellsimoens View Post
    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.

  10. #9
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448
    Answers
    3997

    Default

    Quote Originally Posted by mattjenkins View Post
    But not in Modern.
    Just a bit different:

    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  11. #10
    Sencha User
    Join Date
    Sep 2018
    Posts
    6

    Default

    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 :
    Code:
      
    {
        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:
    Code:
     
    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.

Similar Threads

  1. Bind record to ViewModel data
    By adimkov in forum Ext JS 6.x Q&A
    Replies: 3
    Last Post: 6 Jul 2016, 5:41 AM
  2. How to bind custom data into component's viewModel?
    By ouCharlotte in forum Ext JS 6.x Q&A
    Replies: 8
    Last Post: 2 Sep 2015, 5:39 AM
  3. Replies: 2
    Last Post: 17 Apr 2015, 3:40 PM
  4. Replies: 4
    Last Post: 21 Aug 2014, 5:37 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •