Warm tip: This article is reproduced from serverfault.com, please click

extjs-如何知道视图模型中的数据是否已更改?

(extjs - How to know if the data in the viewmodel has been changed?)

发布于 2020-12-21 13:26:50

我有3个这样的字段:


   {
    name: 'firstName',
    fieldLabel: 'First name',
    bind: '{person.firstName}',
    xtype: 'textfield',
    allowBlank: false,
    listeners: {
        blur : {
           buffer : 1000,
           fn : 'detectGender'
         },
        }
    },
{
    name: 'middleName',
    fieldLabel: 'Middle name',
    bind: '{person.midleName}',
    xtype: 'textfield',
    allowBlank: true,
    listeners: {
        blur : {
           buffer : 1000,
           fn : 'detectGender'
         },
        }
    },
{
    name: 'lastName',
    fieldLabel: 'Last name',
    bind: '{person.lastName}',
    xtype: 'textfield',
    allowBlank: true,
    listeners: {
        blur : {
           buffer : 1000,
           fn : 'detectGender'
         },
        }
    },

我具有确定用户性别的功能:

 detectGender: function () {
        const vm = this.getViewModel()
        const firstName = vm.get('person.firstName');
        const lastName = vm.get('person.lastName');
        
        const personName = `${firstName ? firstName : ' '}${middleName ? middleName : ' '}${lastName ? lastName : ' '}`

        if (firstName) {
      
             //ajax request to server with data: personName 
             // personName migth be  SarahSmith, or Sarah, or SarahEllen, or SarahEllenSmith

        }
    },

它可以正常工作,但是我的问题是,如果所有这些字段均被填写,函数“ detectGender”将全部运行三次。我的服务器返回三个响应。但是我只需要运行一次。也许有某种方法可以创建一个事件,供视图模型在人名更改后侦听?
或关于如何仅从三个字段发送一次用户名的任何想法?希望我很清楚...请任何帮助

Questioner
Ellen
Viewed
1
jmmr 2020-12-22 08:51:25

我认为亚瑟的评论可能是解决问题的最简单方法。

但是,这里还有更多选择。

Opt1-你可以将每个名称字段放在“父级”中,并在父级上侦听“模糊”事件。在sencha小提琴示例中,查看我用“ fieldcontainer”设置的代码“ Opt1”。由于容器没有“模糊”事件,因此将使用“ focusleave”事件。我想到了我的两个选择,这将是最好的选择,因为它可以很好地指示用户输入名称已经完成。

                // Opt 1: Detect "blur" on higher level element
                // so you know user is done
                xtype: 'fieldcontainer',
                layout: 'hbox',
                fieldLabel: 'Name',
                listeners: {
                    // "Opt1: blur equivilent" for a container
                    focusleave: 'detectGender'
                },
                items: [{
                    name: 'firstName',
                    emptyText: 'First',
                    bind: '{person.firstName}',
                    xtype: 'textfield',
                    allowBlank: false
                }, {
                    name: 'middleName',
                    emptyText: 'Middle',
                    bind: '{person.middleName}',
                    xtype: 'textfield',
                    allowBlank: true
                }, {
                    name: 'lastName',
                    emptyText: 'Last',
                    bind: '{person.lastName}',
                    xtype: 'textfield',
                    allowBlank: true
                }]
            }

Opt2-你已开始收听viewModel数据。我已经提供了一个示例,但这基本上是一个“更改”事件,因此,每当有人在字段中键入字母时,你都会得到一个事件,从而导致你现在遇到类似的问题。我举了一个有趣的例子,它具有一个受限制的函数来帮助延迟,但我认为你最终会以太多的方式调用服务器,这与上面的方法不同,你不知道何时有人“完成”输入该名称。

这使用bindingsViewController上配置,这是手动调用viewModel.bind()的便利,这是你可以“监听” viewModel数据的方式。

这是小提琴,希望两个示例合而为一,不要太困惑。

煎茶提琴