将viewModel属性绑定到变量

时间:2017-11-07 14:55:52

标签: javascript extjs viewmodel

说明: 我需要调用后端控制器来查看用户是否是管理员。如果用户 admin,请隐藏应用程序中的工具栏。目前var已成功改变;但是,在已创建视图后,它将发生变化,从而导致视图始终具有可见的工具栏。

问题:

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

MyCode:

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. 返回bool

  3. 分别使用bool更新viewModel

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

  5. 更新

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

1 个答案:

答案 0 :(得分:0)

  

正在使用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'
        ]
    }]
});