问题描述
我有 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}',allowBlank: true,{
name: 'lastName',fieldLabel: 'Last name',bind: '{person.lastName}',
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' 会运行所有 3 次。我的服务器返回三个响应。但我只需要运行一次。也许有某种方法可以为视图模型创建一个事件,以便在人名更改时进行侦听?
或者关于如何只从三个字段发送用户名一次的任何想法?
希望我很清楚...请帮忙
解决方法
我认为 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}',allowBlank: true
},{
name: 'lastName',emptyText: 'Last',bind: '{person.lastName}',allowBlank: true
}]
}
Opt2 - 您开始聆听 viewModel 数据。我已经提供了一个示例,但它基本上是一个“更改”事件,因此每次有人在该字段中键入一个字母时,您都会收到一个事件,从而导致您现在遇到的类似问题。我做了一个有趣的例子,用一个节流函数来帮助延迟,但我认为你最终会调用服务器太多,与上面不同,你不知道什么时候有人“完成”输入名称。
这使用了 ViewController 上的 bindings
配置,这对于手动调用 viewModel.bind() 很方便,这是您可以“监听”viewModel 数据的方式。
这是小提琴,希望将两个示例合二为一不会太混乱。