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

Question

我有 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' 运行将全部执行三次。而我的服务器 returns 三个响应。但我只需要运行这一次。也许有一些方法可以为视图模型创建一个事件，以便在更改人名时监听？
或者关于如何只从三个字段发送一次用户名的任何想法？希望我是清楚enoght ...请任何帮助

Answer 1

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

不过，这里还有几个选项。

Opt1 - 您可以将每个名称字段放在“父级”中，并在父级上收听“模糊”事件。在 sencha fiddle 示例中，查看我用“fieldcontainer”设置的代码“Opt1”。由于容器没有“blur”事件，因此使用“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 数据。我已经提供了一个这样的例子，但它基本上是一个“更改”事件，所以每次有人在字段中键入一个字母时你都会得到一个事件，从而导致你现在遇到的类似问题。我做了一个有趣的例子，有一个限制功能来帮助延迟，但我认为你最终会调用服务器太多，因为与上面不同，你不知道什么时候有人“完成”输入名称。

这在 ViewController 上使用了 bindings 配置，这为手动调用 viewModel.bind() 提供了便利，这是您可以“监听”viewModel 数据的方式。

这是 fiddle，希望将两个示例合二为一不会造成混淆。

Sencha Fiddle

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

How to know if the data in the viewmodel has been changed?

extjs

listener

viewmodel

bind