2014-06-11 3 views
1

Я довольно новыми для Meteor ... Каковы лучшие практики для работы с событиями, как перетаскивание, нажмите и т.д.Meteor BlazeКакие лучшие практики? метеорные .events против JQuery

Я понимаю, есть два основных способа:

1) в Template..events, где вы используете такие вещи, как «щелчок», «падение» и т.д.

Template.someTemplate.events({ 

    'click .some-button': function (e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     console.log("clicked"); 
    }, 

}); 

2) в Template..rendered, где вы просто использовать $ (некоторые селекторы) .click (.. .. $ (что-то) .droppable и т. д. и т.д.

Template.resourcePage.rendered = function(){ 
    this.$('.some-button').click(function (e) { 
     e.preventDefault(); 

     console.log("clicked");  

    }); 
} 

Как мне кажется, это одно и то же? Это простой пример, и то же самое относится к другим событиям, например drop (in droppable()). «drop» не видит формального списка поддерживаемых событий Meteor ... так это значит, что я должен использовать метод # 2.

Что такое gotchas? Любая работа вокруг?

веселит

+0

вы имеете в виду 'Template.resourcePage.onRendered (функция() {' .. –

ответ

2

Meteor в настоящее время поддерживает следующие события в его eventmaps: Нажмите кнопку, DblClick, фокус, размытие, изменение, MouseEnter, MouseLeave, MouseDown, MouseUp, KeyDown, нажатие клавиши, KeyUp (ваш вариант 1)

Источник: http://docs.meteor.com/#eventmaps

Если вам нужны другие события, то лучшим местом для них является действительно сделанное событие (ваш вариант 2). Предоставление кнопки собственного шаблона значительно улучшает читаемость, тестирование и, возможно, производительность.

1

Вы можете найти интересную информацию в the Blaze wiki (прокрутите вниз до событий с помощью JQuery). Кроме того, события определены в файле .js, а не в фактическом шаблоне (файл HTML). Сохраните jQuery из файлов HTML и попробуйте использовать помощники шаблонов, если нужно. Проще говоря, для события щелчка для элемента #button в шаблоне под названием MyView это будет код (лучшая практика):

Template.myView.events = { 
    'click #button' : function (event) { 
    console.log("The button was clicked"); 
    } 
} 

Это означает, что вы определяете, какое событие происходит в пределах Template.myView.events переменного , Конечно, для одного и того же шаблона может быть несколько событий. Вы найдете типы событий, которые будут использоваться in the Meteor documentation. Вы можете использовать любой код jQuery в файле js и переменной Template..events.

+0

Спасибо за быстрый ответ я должен был быть более ясным с моим вопросом. Я не помещаю jQuery в HTML, все в файлах JS. Похоже, что два способа, о которых я упоминал, похожи, но немного отличаются. Например: drop в методе .events, похоже, имеет (события) как параметр Метеор ... где «drop» внутри оператора jQuery .droppable() имеет (event, ui) в качестве параметров, и вы можете делать такие вещи, как получить элемент, который был удален на droppable (например, ui.draggable.clone), где я не мог найдите это в параметре «событие» Метеор. – aginsburg

3

Текущая версия Meteor поддерживает пользовательские события (хотя это не относится к документации). Я использую его сейчас, и он прекрасно работает так же, как это:

Template.myTemplate.events({ 
    'customEvent #button': function(event, template) { 
    // can be called with $("#button").trigger('customEvent', {some_data: 'some data'}); 
    // You can also access data, e.g. 'some data' is accessible at event.some_data 
    console.log("clicked!"); 
    } 
});