Binding a Simple Viewmodel with Single Record

Question

I created this fiddle showing what I want to do.

Basically, I configured a Store that loads only a single record (it reality it will be the currently signed in user). However, I can't seem to bind anything to that store properly. How can I get that {u.name} to output properly?

Here is the code:

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name']
});

Ext.application({
    name : 'Fiddle',

    launch : function() {

        new Ext.Component({
            renderTo: Ext.getBody(),

            viewModel: {
                stores: {
                    u: {
                        proxy: {
                          type: 'ajax',
                          url: 'user.json'
                        },

                        model: 'User',

                        autoLoad: true
                    }
                }
            },

            bind: 'Test name: {u.name}'
        });

    }
});

yorlin · Accepted Answer · 2015-10-06T09:53:21.830

4

Try bind: 'Test name: {u.data.items.0.name}'

UPD: As an explanation to this - u is an object with its properties, so trying to bind to u.name will actually bind to the name property of the store. Wile the store has no name property it will always be null. Store's received data is placed in data property. Items property contains a raw array of received data and so on.

edited Oct 06 '15 at 09:53

answered Oct 06 '15 at 08:53

yorlin

440
3
15

1

If you are not sure about the answer then please post it as a comment not as an answer if possible. – ρss Oct 06 '15 at 09:35
1

@ρss I'm pretty sure in my answer. – yorlin Oct 06 '15 at 09:43
Then please provide some explanation to your answer regarding why should it work, it helps unintelligent users like me :P and also it shall also cause your answer to get upvotes! – ρss Oct 06 '15 at 09:45
1

I hope that's better ? ;) – yorlin Oct 06 '15 at 09:54

score 2 · Answer 2 · answered Oct 06 '15 at 10:41

2

In your fiddle you're using a store while it looks like you need just a single record.

Using links instead of stores should work better, like:

links: {
    u: {
        type: 'User',
        id: 1
    }
}

Working example based on your code: https://fiddle.sencha.com/#fiddle/uuh

answered Oct 06 '15 at 10:41

CD..

72,281
25
154
163

What will happen when user with id=2 will login? How to use links more dynamically? – yorlin Oct 06 '15 at 12:02
@CD.. -- Aren't you assuming I would know the `id` of the user who is logged in? This is how the all the docs recommend it is done but it always assumes you would know the `id` somehow – Dave L. Oct 06 '15 at 16:01
@yorlin: you can use `linkTo` for setting the link dynamically: http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.app.ViewModel-method-linkTo – CD.. Nov 08 '15 at 11:53
@CD.. Is it possible to set a dynamic url using links as it is done for stores, i.e. proxy: { url: '/base_url/{id}'} ? – fen1ksss Jun 10 '17 at 07:50

Binding a Simple Viewmodel with Single Record

2 Answers2