CODEWITHSUNDEEP
javascriptextjsmvvmextjs6
Dave L.
Dave L.

Reputation: 9781

Binding a Simple Viewmodel with Single Record

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}'
        });

    }
});

Upvotes: 0

Views: 1534

Answers (2)

CD..
CD..

Reputation: 74096

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

Upvotes: 2

yorlin
yorlin

Reputation: 440

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.

Upvotes: 4

Related Questions