将 viewModel 属性与变量绑定

Question

简介： 我需要调用后端控制器来查看用户是否是管理员。如果用户是非管理员，则隐藏应用程序中的工具栏。目前 var 正在成功更改；但是，在创建视图后它会发生变化，导致视图始终使工具栏可见。

问题：

• 需要检查后端以查看用户是否在管理员组中。
• 如果他们在管理员组中，需要返回 true

我的代码：

var adminBool = false;

function CheckAdmin() {
    debugger;
    var a;
    Direct.Report.IsAdmin(this.results, a);
    debugger;
};

function results(result, constructor, c, d, e, f, g, h) {
    debugger;
    this.adminBool= result.adminUser; //returns bool
}

Ext.define('Ext.View.MyViewModel', {
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.AdministrationViewModel',
    init: this.CheckAdmin(),
    data: {
        addNew: true,
        update: true,
        gridData: null,
        isAdmin: this.adminBool
    }
});

简介：

1. 调用后台控制器获取管理员状态

2. 返回布尔值

3. 分别用 bool 更新 viewModel

4. ViewModel 属性“isAdmin”将与隐藏属性绑定以隐藏非管理员不需要的操作

更新：

基本上我需要一种方法来延迟“isAdmin：this.adminBool”检查到后端调用完成后。

Answer 1

当你使用ViewModel。

所以你可以使用set() 方法来更新你的viewmodel 字段。

我使用viewmodel 创建了一个sencha fiddle 演示。您可以检查它在小提琴中的工作方式。在这个小提琴中，我没有使用任何 API，它只是关于 ViewModel 的示例。希望这能帮助您解决问题或实现您的要求。

//ViewModel
Ext.define('MyViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.AdministrationViewModel',
    data: {
        isAdmin: true
    }
});
//Panel
Ext.create('Ext.panel.Panel', {
    title: 'ViewModel example',
    width: '100%',
    renderTo: Ext.getBody(),
    viewModel: 'AdministrationViewModel',
    layout: {
        type: 'vbox', // Arrange child items vertically
        align: 'stretch', // Each takes up full width
        padding: 10
    },
    defaults: {
        margin: 10
    },
    items: [{
        xtype: 'combo',
        height: 40,
        fieldLabel: 'Choose Admin or user',
        emptyText: 'Choose Admin or user',
        labelAlign: 'top',
        store: {
            fields: ['name', 'value'],
            data: [{
                "value": true,
                "name": "Admin"
            }, {
                "value": false,
                "name": "User"
            }]
        },
        queryMode: 'local',
        displayField: 'name',
        valueField: 'value',
        listeners: {
            select: function (combo, record) {
                var viewModel = combo.up('panel').getViewModel(),
                    isAdmin = record.get('value');

                //If selected value is {Admin} then we will show toolbar otherwise in case of {User} hide
                viewModel.set('isAdmin', !isAdmin);
            }
        }
    }, {
        xtype: 'toolbar',
        width: '100%',
        height: 50,
        padding: 10,
        bind: {
            hidden: '{isAdmin}'
        },
        items: [{
                // xtype: 'button', // default for Toolbars
                text: 'Admin',
            }, {
                xtype: 'splitbutton',
                text: 'Split Button'
            },
            // begin using the right-justified button container
            '->', // same as { xtype: 'tbfill' }
            {
                xtype: 'textfield',
                name: 'field1',
                emptyText: 'enter search term'
            },
            // add a vertical separator bar between toolbar items
            '-', // same as {xtype: 'tbseparator'} to create Ext.toolbar.Separator
            'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.toolbar.TextItem
            {
                xtype: 'tbspacer'
            }, // same as ' ' to create Ext.toolbar.Spacer
            'text 2', {
                xtype: 'tbspacer',
                width: 50
            }, // add a 50px space
            'text 3'
        ]
    }]
});