2014-12-08 4 views
0

Мне любопытно узнать, что отправка события происходит в Enyo. Скажем, для простого дерева DOM, имеющего родительский узел с двумя дочерними узлами. Все, что я хочу сделать, - это распространять пользовательское событие, сгенерированное с дочернего 1 на дочернее 2. Я создал образец для этого.Поведенческая разница между enyo.dispatch (e) и target.dispatchEvent (e) web api

http://jsfiddle.net/hfh3z2q4/

enyo.kind({ 
name: "MySample", 
kind: "moon.Panels", 
classes: "moon", 
pattern:"activity", 
components: [{kind: "moon.Panel", 
title: "Hello World!",headerComponents: [ 
{kind: "moon.IconButton", src: "assets/icon-like.png"} 
], 
components: [ 
{kind: "moon.Input",placeholder: "type time",onchange :"handleInput"}, 
{kind:"ClockSample", name:'time'} 
]} 
], 
handleInput: function(inSender, inEvent) { 
    // body... 
    var val=inSender.getValue(); 
    var evt = document.createEvent("Event"); 
    evt.initEvent("myEvent",true,true); 
    evt.val=val; 
    var target=this.$.time.hasNode(); 
    target.dispatchEvent(evt); 
    //enyo.dispatcher.dispatch(evt); 
} 
}); 
enyo.kind({ 
name: "ClockSample", 
components: [ 
    {kind: "moon.Clock", name:"clock"} 
], 
create:function(){ 
    this.inherited(arguments); 
    enyo.dispatcher.listen(document, "myEvent", this.bindSafely(this.myEventHandler)); 
}, 
myEventHandler: function(inSender, inEvent) { 
    // body... 
    this.$.clock.setDate(new Date(inSender.val)); 
} 
}); 


new MySample({fit:true}).renderInto(document.body); 

Если я пытаюсь использовать "target.dispatchEvent (EVT)" и введите ожидаемый формат даты (т.е. Jan 01 2015 9:08:07), время часы задаст то же самое, но поведение не похоже на попытку использования «enyo.dispatcher.dispatch (evt)».

Пожалуйста, помогите мне разобраться в различиях и способах достижения этого же.

ответ

1

Позвольте мне начать, сказав: «Не делайте этого!». Это не правильный способ справиться с этим типом проблемы. Если вы действительно должны отправлять такие сообщения между объектами, используйте сигналы. Для попытки отправки сообщений между братьями и сестрами ломается инкапсуляция.

Во-вторых, обычные события Enyo не являются событиями DOM. Если вы хотите создавать события на объектах для прослушивания, вы должны объявить блок events с вашими событиями, как описано здесь: Event Handling. Вы пошли по маршруту событий DOM, который я не рекомендую. Если вы хотите использовать DOM-события, используйте метод dispatchEvent(), который вы уже сделали.

В-третьих, при использовании Лунного камня выберите только Темный или Светлый, а не оба. Moonstone также требует использования библиотеки Spotlight.

Наконец, используя dispatcher.dispatch() обходит регистрацию событий dom, которую вы сделали с listen(). Вы можете преодолеть это, используя сигналы и прослушивание настраиваемого события. Но на самом деле, просто используйте чистые сигналы. Попробуйте эту скрипку для первого (менее идеального) подхода: http://jsfiddle.net/hfh3z2q4/1/

+0

Благодарим вас за подробную информацию. Я получил намерение, что это очень необходимо для сохранения скрытия инкапсуляции/данных. Но я не уверен, как использование сигналов или пузыря событий в дереве DOM помогает поддерживать инкапсуляцию данных. Можете ли вы подробнее рассказать об этом. –

+1

Механизм сигналов - это широковещательное сообщение, на которое могут подписаться подписчики. Это лучше, чем механизм барботирования, потому что вам не нужно знать, где пузырить сообщение, и оно распространяется только на подписчиков. – Pre101

Смежные вопросы