Sencha Touch 2 - 在MVC中添加監聽器的正確方法？

Question

今天，我有一個關於正確/最好的方法是使用煎茶觸摸2通過它的建議MVC模型添加聽衆什麼小問題。

至於我可以看到，有我一直在呈現方式主要有兩種聽衆在我的意見添加到各種組件。

1.在控制器。

我碰到這種方法來讀取該文件MVC爲ExtJS的4.0（觸摸沒有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!'); 
       } 
      }, 
} 

上述代碼將駐留在主控制器內，例如。在這裏，如您所見，我正在爲整個應用程序中的所有按鈕添加一個「tap」偵聽器。

據我瞭解，訪問這樣的特定組件，我需要有一個唯一的ID來標記他們每個人，然後用componentquery在這個位置放置listners到他們。

問題：我認爲這種方法非常酷......但是我遇到了在列表中使用它的問題......有時候我想要聽一些特定的列表項，比如「tapstart」和「bandnd」，但是因爲通常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>' 
      } 
     ]  
    } 
}); 

Tap功能將被調用。聽起來很簡單。 希望它能幫助，

克里斯

Answer 2

既然你問聽一個列表項的活動，你應該看看： http://www.sencha.com/blog/event-delegation-in-sencha-touch

不幸的是，語法改變了一點與ST2。看到這個線程： http://www.sencha.com/forum/showthread.php?154513-How-to-buffer-events-without-using-addListener

Answer 3

你必須添加的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') 
       } 

       }); 
     }, 
} 

這可能會幫助您添加監聽器

感謝

Answer 4

有增加聽衆的幾種方法，我認爲有一對夫婦每一種方法的考慮：

我應該把監聽器放在控制器上還是放在視圖上？

對我而言，這取決於;如果您的視圖基本上是要重用的組件，那麼您可能希望將事件與要素綁定。 雖然，你不應該把事件的邏輯放在視圖上。相反，您的視圖應該觸發控制器可以偵聽的事件。

例子：

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); 
    } 
}); 

在此面板上，我們有一個後退按鈕。該視圖不應該處理後退按鈕的功能（因爲它取決於應用程序的流程而不是視圖本身），但它應該激發我們可以捕捉到控制器的事件。

另一個非常重要的事情，你應該總是考慮在內，是聽衆的scope。基本上，範圍意味着this在由事件觸發的功能中具有的值。 （在這個例子中，視圖本身）

希望這有助於！

編輯：鏈接煎茶指南，瞭解有關事件：

http://docs.sencha.com/touch/2-0/#!/guide/events