javascript Sencha Touch 2 - 在 MVC 中添加侦听器的正确方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8515336/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sencha Touch 2 - Correct way to add listeners in the MVC?
提问by Mavorus
Today I have a small question regarding what the correct/best way is to add listeners using Sencha Touch 2 via it's recommended MVC model.
今天我有一个关于使用 Sencha Touch 2 通过推荐的 MVC 模型添加侦听器的正确/最佳方法的小问题。
As far as I can see, there are two main ways that I have been presented with to add listeners to the various components across my views.
据我所知，有两种主要方式向我展示了向视图中的各种组件添加侦听器。
1. In the controller.
1. 在控制器中。
I came across this method while reading the MVC documents for ExtJS 4.0 (no MVC docs for touch yet). It goes like so:
我在阅读 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!');
}
},
}
The above code would reside inside the main controller, for instance. Here, as you can see, I am adding a "tap" listener to ALL buttons across the entire app.
例如，上面的代码将驻留在主控制器中。在这里，如您所见，我向整个应用程序中的所有按钮添加了一个“点击”侦听器。
As far as I know, to access specific components in this way, I would need to tag them each with a unique ID and then use componentquery at this location to place listners onto them.
据我所知，要以这种方式访问特定组件，我需要用唯一的 ID 标记每个组件，然后在此位置使用 componentquery 将侦听器放置到它们上。
Question: I think this method is pretty cool... but I have run across problems using it in lists... sometimes I want to listen to a specific list item for things like "tapstart" and "tapend" but since usually listItems are dynamically created as children to a list... I have no idea how to give them unique IDs and/or find them using the query engine (due to my inexperience I guess? I haven't been able to google/find anything about it in the docs that makes sense).
问题：我认为这个方法很酷……但我在列表中使用它时遇到了问题……有时我想听一个特定的列表项，比如“tapstart”和“tapend”，但因为通常 listItems 是动态创建为列表的子项......我不知道如何给他们唯一的 ID 和/或使用查询引擎找到它们（由于我的经验不足，我猜？我一直无法谷歌/找到任何关于它的信息在有意义的文档中）。
2. During the init/config of individual components
2. 在各个组件的 init/config 期间
The other method that I came across to add listeners to components is to define the listener, it's callback and the event it's listening to directly in the component config.
我遇到的另一种向组件添加侦听器的方法是直接在组件配置中定义侦听器、它的回调和它正在侦听的事件。
Example:
例子：
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>'
}
]
},
});
As you can see from this code, I have created a "onItemTap" listener function, and this seems to work pretty darn well. However... it scares me for some reason and I have no idea if what I am doing is correct or not.
正如您从这段代码中看到的，我创建了一个“onItemTap”侦听器函数，这似乎工作得非常好。但是......出于某种原因，它让我感到害怕，我不知道我所做的是否正确。
Could anyone provide some help as to whether I am doing the right thing, if I should be doing this a different way, or if I am completely off track and shouldn't even be defining listeners like this in the first place?
任何人都可以提供一些帮助，以确定我是否在做正确的事情，我是否应该以不同的方式做这件事，或者我是否完全偏离了轨道，甚至不应该首先定义这样的听众？
I would really appreciate any help given! Thank you very much everyone.
我非常感谢您提供的任何帮助！非常感谢大家。
采纳答案by Chris Laarman
The following method to add listeners looks a bit clearer to me:
以下添加侦听器的方法对我来说看起来更清晰一些：
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>'
}
]
}
});
The tap function will be called when the list is tapped. AS simple as it sounds. Hope it helps,
当列表被点击时，tap 函数将被调用。听起来很简单。希望能帮助到你，
Chris
克里斯
回答by user1101367
since you ask about listening to events on a list item, you should probably check out: http://www.sencha.com/blog/event-delegation-in-sencha-touch
既然您询问收听列表项上的事件，您可能应该查看：http: //www.sencha.com/blog/event-delegation-in-sencha-touch
Unfortunately, the syntax is changed a bit with ST2. See this thread: http://www.sencha.com/forum/showthread.php?154513-How-to-buffer-events-without-using-addListener
不幸的是，ST2 的语法略有改变。请参阅此线程：http: //www.sencha.com/forum/showthread.php?154513-How-to-buffer-events-without-using- addListener
回答by Naresh Tank
you have to add itemId propety in your list and by using this itemId you can get object of list and after that you can add listeners like this
你必须在你的列表中添加 itemId 属性，通过使用这个 itemId 你可以获得列表的对象，然后你可以添加这样的监听器
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({
Paythread.view.CommentList.query('itemIdof List')[0].on({
itemtap: function() {
alert('test')
}
});
},
}
this may help you
这可能会帮助你
Thanks
谢谢
回答by pflopez
There are several ways of adding listeners, and I think that there are a couple of considerations on each approach:
添加侦听器有多种方法，我认为每种方法都有几个注意事项：
Should I put the listeners on the controller or on the view??
我应该将侦听器放在控制器上还是视图上？
For me, that depends; if your view is basically a component that you are going to re-use, you probably want to tie up elements with events. Although, you should not put the logic of the event on the view.Instead, your view should fire an event that can be listened by the controller.
对我来说，这取决于；如果您的视图基本上是您要重用的组件，您可能希望将元素与事件联系起来。 虽然，您不应该将事件的逻辑放在视图上。相反，您的视图应该触发一个可以被控制器监听的事件。
Example:
例子：
Ext.define("App.view.SomePanel", {
extend: "Ext.form.Panel",
xtype: "somepanel",
config:{
scrollable:'vertical' ,
},
initialize: function () {
var backButton = {
xtype: "button",
ui: "back",
text: "Home",
handler: this.onBackButtonTap,
scope: this
};
this.add([
{
xtype: "toolbar",
docked: "top",
title: "Edit Player",
items: [ backButton ]
}
]);
},
onBackButtonTap: function () {
this.fireEvent("goBackCommand", this);
}
});
On this panel, we have a back button. The view shouldn't handle what the back button does (as it depends on the flow of the app rather than the view itself) but it should fire an event that we can catch on the controller.
在这个面板上，我们有一个后退按钮。视图不应该处理后退按钮的作用（因为它取决于应用程序的流程而不是视图本身）但它应该触发一个我们可以在控制器上捕获的事件。
Another very important thing that you should alwaystake into consideration, is the scopeof the the listener. Basically, the scope means what value thiswill have in the function triggered by the event. (In this example, the view itself)
您应该始终考虑的另一件非常重要的事情是scope听者的。基本上，范围意味着this事件触发的函数中将具有什么值。（在这个例子中，视图本身）
Hope this helps!
希望这可以帮助！
Edit: link to Sencha guide about events:
编辑：有关事件的 Sencha 指南的链接：
