Структура кода с ExtJS

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 (node, 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 предоставляет параметр обратного вызова, почти всегда есть параметр области действия для установки значения 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 этот стиль будет чувствовать себя неловко, плюс (я почти уверен) он намного более подвержен ошибкам.