Метеор с выпадающим меню Semantic UI не работает

В настоящее время я пытаюсь интегрировать Semantic UI в свое приложение. Визуальный стиль отображается нормально. Однако поведение, похоже, не работает, и я не могу вызвать какие-либо исключения в своей консоли, чтобы помочь с отладкой.

  • Я создал тестовое приложение Meteor по адресу https://github.com/andersr/semantic-test.
  • Я не вижу никаких исключений в консоли и не знаю, как это устранить. Мы ценим любые предложения.

Некоторые соответствующие фрагменты кода:

Разметка для раскрывающегося списка пользовательской навигации:

<div class="ui dropdown link item"> {{currentUser.name}} <i class="dropdown icon"></i> <div class="menu"> <a class="item">Sign Out</a> </div> </div>

файл custom.semantic.json:

{
  "definitions": {
  ...
  "dropdown": true,
  ...
 }

}

Вызов раскрывающегося списка в /client/client.js (хотя не уверен, что это необходимо):

$('.dropdown').dropdown({
  transition: 'drop'
});

jquery meteor semantic-ui
person andersr    schedule 14.06.2015    source источник

Ответы (1)


arrow_upward
4
arrow_downward

jQuery плагины необходимо инициализировать, когда соответствующие элементы HTML были вставлены в DOM, что обычно имеет место в стандартных веб-приложениях, отображаемых на стороне сервера, но Meteor использует другой подход, используя реактивные шаблоны на стороне клиента, все создание HTML выполняется в браузер.

Вот почему вам нужно инициализировать jQuery плагины, когда Meteor вставит ваш раскрывающийся список в документ, вы можете использовать событие жизненного цикла шаблона onRendered, чтобы определить, когда вы можете безопасно активировать поведение виджета.

JS

Template.dropdown.onRendered(function(){
  this.$(".dropdown").dropdown();
});

HTML

<template name="dropdown">
  <div class="ui dropdown link item">
    {{currentUser.name}} <i class="dropdown icon"></i>
    <div class="menu">
      <a class="item">Sign Out</a>
    </div>
  </div>
</template>
person saimeunt    schedule 14.06.2015
comment
Это исправило это. Спасибо! (И теперь я отправлю запрос сопровождающим github.com/Semantic-Org /Semantic-UI-Meteor рассмотреть возможность включения этого в свои документы ReadMe.) - person andersr; 15.06.2015