Question

我正在尝试更好地组织我的ExtJS javascript。我有一个像这样的ExtJS对象：

Ext.define('QBase.controller.ControlModelConfigurationController', {
    extend: 'Ext.app.Controller',

    views: [
        'ControlModelConfiguration'
    ],

    init: function() {
        console.log('Initialized ControlModelConfigurationController');
        this.control({
            '#testBtn': {
                click: this.loadModel
            }
        });
    },

    loadModel: function() {
        console.log('Load Model....');
        var conn = new Ext.data.Connection; 
        conn.request({ 
                        url: 'partsV10.xml',  
                        callback: function(options, success, response) 
                        {  
                            if (success) 
                            { 
                              alert("AHHH");
                              var dq = Ext.DomQuery; 
                              var xml = response.responseXML; 
                              var nodes = dq.select('part', xml,parent);  
                              Ext.Array.forEach(nodes,handleNode);
                             } 
                        }
        });
    },
    handleNode: function(items) {
        console.log(item.name);
    }  
});

上面发布的代码无效。 Ext.Array.forEach（nodes，handleNode）会导致麻烦。而不是使用像：

这样的匿名函数

...
Ext.Array.forEach(nodes,function(item) {
    console.log(item)});
}
...

我想将匿名函数解压缩为命名外部函数。不幸的是，我无法找出正确的语法来建立如上所示的代码结构。

与此同时，我想通了

function handleNode(item) {
    {console.log(item)}
}

在文件的最后工作。是否可以将handleNode方法作为对象 - 控制器的“成员”？

提前致谢

克里斯

Answer 1

handleNode是包含对象的成员。调用loadModel时，this包含正确的对象，但在调用回调时，它不会指向我们感兴趣的对象。您可以将this保存到局部变量self，并改为使用它。

loadModel: function() {
    var self = this
    console.log('Load Model....');
    var conn = new Ext.data.Connection; 
    conn.request({ 
                    url: 'partsV10.xml',  
                    callback: function(options, success, response) 
                    {  
                        if (success) 
                        { 
                          alert("AHHH");
                          var dq = Ext.DomQuery; 
                          var xml = response.responseXML; 
                          var nodes = dq.select('part', xml,parent);  
                          Ext.Array.forEach(nodes, self.handleNode);
                         } 
                    }
    });
},

Answer 2

vhallac发布的解决方案并不完全正确。它假定handleNode不通过this变量引用当前对象。也许只是一个错字，但另外它并不是ExtJS的方式......

每当ExtJS提供一个回调参数时，几乎总有一个scope参数来设置回调函数中this的值。

loadModel: function() {
    console.log('Load Model....');
    var conn = new Ext.data.Connection;
    conn.request({ 
        url: 'partsV10.xml',
        callback: function(options, success, response) {
            if (success) { 
                alert("AHHH");
                var dq = Ext.DomQuery;
                var xml = response.responseXML;
                var nodes = dq.select('part', xml, parent);
                Ext.Array.forEach(nodes, this.handleNode, this);
            }
        },
        scope: this
    });
},

handleNode: function(node) {
    // From within here you might want to call some other method.
    // Won't work if you leave out the scope parameter of forEach.
    this.subroutine();
}

就像forEach使用范围参数一样，请求方法使用范围配置选项。这是传递范围的ExtJS约定。你也可以创建一个额外的局部变量并从那里引用范围，但是在ExtJS的上下文中，这种风格会让人感到尴尬，而且（我很确定）它更容易出错。

ExtJS的代码结构

2 个答案: