Extjs 5, как сохранить данные пользователя после входа в систему и использовать их для привязки данных в ViewModel

Я новичок в extjs 5. Потратил много времени, пытаясь изучить его, и мне трудно понять некоторые вещи.

Мне удалось создать систему аутентификации, но проблема заключается в том, где хранить пользовательский объект. Прочитав некоторые документы и другие ответы здесь, на SO, я придумал стратегии.

Аутентифицировать пользователя и получить пользовательские данные, затем: -

  • Создайте экземпляр модели с пользовательскими данными и сохраните его в глобальной переменной: проблема заключается в том, как добавить это в модель представления, чтобы я мог привязать данные своих полей к представлению. Например, привяжите имя пользователя к тексту кнопки.
  • Создайте ссылку на модель в модели просмотра. Проблема заключается в том, как мне передать идентификатор модели, чтобы я мог получить пользователя с сервера.
  • Сохраните пользовательские данные в глобальной переменной, затем в контроллере представления, получите доступ к прокси-серверу хранилища памяти viewModel, затем добавьте данные в хранилище, затем загрузите хранилище. Проблема в том, что когда я делаю это таким образом, я все еще не могу получить доступ к данным в моем представлении для привязки данных.

Пожалуйста, смотрите фрагменты ниже: -

Сценарий 1

Application.js

Ext.define('Wilma.Application', {
extend: 'Ext.app.Application',

requires: [
    "Wilma.DirectAPI",
    'Wilma.view.login.Login'
],    
name: 'Wilma',

views: [
    'Wilma.view.MyViewport'
],

stores: [
    // TODO: add stores here
],
enableQuickTips: true,

launch: function() {
     ExtRemote.HWLogin.loginStatus('', function(result, event){
        if(result.success){
            console.log('i was called' + result.data);
            //Global variable
            Wilma.app.LoggedInUser =  Ext.create(Wilma.model.User, result.data.user);
            console.log(Wilma.app.LoggedInUser);
            Ext.widget('mainviewport');
           }
          else {
               Ext.widget('login');
           }

        }
     });
 });

ViewModel

Ext.define('Wilma.view.header.usermenu.UsermenuModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.usermenu',
    requires: [
        'Wilma.store.Users',
        'Wilma.model.User'
    ],

    // ???????????????
    // ???????????????
    // What do i do here
});

Сценарий 2

App.js

Соответствующая часть:

launch: function() {
     ExtRemote.HWLogin.loginStatus('', function(result, event){
        if(result.success){
            console.log('i was called' + result.data);
            //Global variable
            Wilma.app.LoggedInUser =  Ext.create(Wilma.model.User, result.data.user);
                     //OR
            //Wilma.app.LoggedInUser = result.data.user

            console.log(Wilma.app.LoggedInUser);
            Ext.widget('mainviewport');
           }
          else {
               Ext.widget('login');
           }

        }
     });

ViewModel

links: {
    loggedinuser:{
        reference: 'user',
        id: Wilma.app.LoggedInUser.get('_id')
    }
}

Сценарий 3

ViewController

Ext.define('Wilma.view.header.usermenu.UsermenuController', {
extend: 'Wilma.controller.BaseViewController',
alias: 'controller.usermenu',

onbeforerender: function(button, eOpts) {
    var userstore = this.getViewModel().getStore('usermenu');
        userstore.getProxy().data = Wilma.app.LoggedInUser;
        userstore.load();
    //userstore.add(Wilma.app.LoggedInUser);

}
});

ViewModel

Ext.define('Wilma.view.header.usermenu.UsermenuModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.usermenu',
requires: [
    'Wilma.store.Users',
    'Wilma.model.User'
],


stores: {
    usermenu: {
        model: 'Wilma.model.User',
        proxy:{
            type: 'memory'
        },
        reader: {
            type:'json',
            rootProperty: 'data'
            //messageProperty:'message'
        },
        autoLoad:false

      }
    }
});

Пожалуйста, я застрял на этом слишком долго. Пожалуйста, нужна помощь?

Позвольте мне резюмировать:

Что я хочу сделать, так это аутентифицировать пользователя, получить информацию о пользователе и сохранить его где-нибудь с привязкой данных к пользовательским данным в модели представления и представлении (в данном случае текст кнопки)

Спасибо


mvvm extjs extjs5
person mojotaker    schedule 02.11.2014    source источник
comment
Я считаю, что это делает то, что вам нужно (захватите информацию из хранилища и сохраните ее в модели представления): dev.sencha.com/ext/5.0.0/examples/kitchensink/   -  person Guilherme Lopes    schedule 02.11.2014
comment
Спасибо, но извините, это мне не поможет. В большинстве этих примеров они имеют дело с сетками и хранилищами. что, если я просто хочу одну запись или получить конкретную запись без использования сетки. Спасибо   -  person mojotaker    schedule 02.11.2014

Ответы (1)


arrow_upward
3
arrow_downward

В любом контроллере представления, где представление имеет модель представления, или компонент, которому назначена модель представления, вы можете использовать getViewModel(). Так:

Ext.define('MainViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.main'
});

Ext.define('MainViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.main',

    launch: function() {
        ExtRemote.HWLogin.loginStatus('', function(result, event) {
            if(result.success){
                this.getViewModel().set('currentUser',
                    Ext.create('User', result.data.user));
            }
        });
    }
});

Ext.define('MainView', {
    extend: 'Ext.Container',
    viewModel: 'main',

    bind: { title: '{currentUser.username}' }
});

После получения результата входа currentUser устанавливается в модели представления и становится доступным для использования в представлении.

person Colin Ramsay    schedule 08.12.2014
comment
Большое тебе спасибо. Я также не был уверен в том, чтобы сделать это в контроллере представления. - person mojotaker; 14.12.2014