javascript - Sencha Touch 2 - 在 MVC 中添加监听器的正确方法？

Question

今天我有一个小问题，关于通过推荐的 MVC 模型使用 Sencha Touch 2 添加监听器的正确/最佳方法是什么。

据我所知，向我展示了两种主要方法，可以将监听器添加到我的 View 中的各种组件。

<强>1。在 Controller 中。

我在阅读 ExtJS 4.0 的 MVC 文档时遇到了这种方法(还没有用于触摸的 MVC 文档)。它是这样的:

init: function() {
        console.log ('Launched the controller');

        //listening test
        //the Control function/method is unique to controllers and is used to add listeners to stuff
        this.control({
            'button': { 'tap' : function (){
                console.log('the buttons speak!');
                }
            },
}

例如，上面的代码将驻留在主 Controller 中。在这里，如您所见，我正在为整个应用程序中的所有按钮添加一个“点击”监听器。

据我所知，要以这种方式访问​​特定组件，我需要使用唯一 ID 标记它们，然后在该位置使用 componentquery 将监听器放置到它们上。

问题:我认为这个方法很酷……但是我在列表中使用它时遇到了问题……有时我想听一个特定的列表项，比如“tapstart”和“tapend”，但是因为通常 listItems 是作为列表的子项动态创建的......我不知道如何给它们唯一的 ID 和/或使用查询引擎找到它们(我猜是由于我缺乏经验？我无法谷歌/找到文档中关于它的任何有意义的内容)。

<强>2。在各个组件的初始化/配置期间

我遇到的另一种向组件添加监听器的方法是定义监听器、它的回调和它直接在组件配置中监听的事件。

示例:

Ext.define('Paythread.view.CommentList', {

    extend: 'Ext.Panel',    
    alias: 'widget.CommentList',
    layout: 'vbox',
    config : {
        items: [    
            { 
                xtype: 'list', 
                layout: 'fit', //fullscreen: true, 
                height: 'viewport.height',
                store: 'Comments',
                onItemTap: function(){
                    //do stuff
                },
                pressedDelay: 20, //HOLY CRAP IMPORTANT FOR UX
                itemTpl: '<h1>{user_id}</h1><h2>{comment}</h2>'
            }

        ]       
    }, 
});

正如您从这段代码中看到的，我已经创建了一个“onItemTap”监听器函数，这似乎工作得非常好。然而...出于某种原因它让我害怕，我不知道我在做什么是否正确。

任何人都可以提供一些帮助，看看我是否在做正确的事情，我是否应该以不同的方式做这件事，或者我是否完全偏离了轨道，甚至不应该首先定义这样的听众？

如果能提供任何帮助，我将不胜感激!非常感谢大家。

Answer 1

以下添加监听器的方法对我来说更清晰一些:

Ext.define('Paythread.view.CommentList', {

    extend: 'Ext.Panel',    
    alias: 'widget.CommentList',
    layout: 'vbox',
    config : {
        items: [    
            { 
                xtype: 'list', 
                layout: 'fit', //fullscreen: true, 
                height: 'viewport.height',
                store: 'Comments',
                listeners: {
                    itemtap: function() {
                        //do stuff
                    }
                }
                pressedDelay: 20, //HOLY CRAP IMPORTANT FOR UX
                itemTpl: '<h1>{user_id}</h1><h2>{comment}</h2>'
            }
        ]       
    }
});

点击列表时将调用点击功能。听起来很简单。 希望对你有帮助，

克里斯