Sencha Touch 2 - правильный способ добавления слушателей в MVC?

Question

Сегодня у меня есть небольшой вопрос о том, как правильно / лучше всего добавить слушателей с помощью Sencha Touch 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!');
                }
            },
}

Приведенный выше код будет находиться, например, в главном контроллере. Здесь, как вы можете видеть, я добавляю слушателя «касания» ко ВСЕМ кнопкам во всем приложении.

Насколько я знаю, чтобы получить доступ к определенным компонентам таким способом, мне нужно было бы пометить их каждый уникальным идентификатором, а затем использовать компонентный запрос в этом месте для размещения на них списков.

Вопрос: я думаю, что этот метод довольно крутой ... но я сталкивался с проблемами при использовании его в списках ... иногда я хочу прослушать конкретный элемент списка для таких вещей, как "tapstart" и "tapend", но так как обычно listItems динамически создаются как дочерние элементы для списка ... Я понятия не имею, как дать им уникальные идентификаторы и / или найти их с помощью механизма запросов (из-за моей неопытности, я думаю? Я не смог Google / найти что-нибудь об этом в документах, что имеет смысл).

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("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 будет иметь в функции, вызванной событием.(В данном примере это само представление)

Надеюсь, это поможет!

Редактировать: ссылка на руководство Sencha о событиях:

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

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('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>'
            }
        ]       
    }
});

Функция касания будет вызываться при касании списка.Как просто, как кажется.Надеюсь, это поможет,

Крис