Nano Hash - криптовалюты, майнинг, программирование

Ошибка в Meteor/Semantic-UI?

использование модального окна semantic-ui не работает, если корневой элемент является шаблоном метеора:

пакет: семантический интерфейс-CSS

Воспроизведение ошибки:

привет.html:

<template name="hello">
    <head>
        <title>Hello Error</title>
    </head>

    <body>
    <h1>Reproduce error</h1>

    {{> navigation}}

    <div class="delete openModal">OPEN<i class="close icon"></i></div>

    <div id="modalView" class="ui modal">
        <div class="content">
            <div class="ui fluid input">
                Modal Error Test
            </div>
        </div>
        <div class="actions">
            <div class="ui button cancel">Cancel</div>
            <div class="ui button ok">OK</div>
        </div>
    </div>
    </body>
</template>

<template name="navigation">
    <div class="ui menu">
        <a class="item" id="home" href="/">
            <i class="home icon"></i> welcome
        </a>


    </div>

</template>

И в коде Javascript (hello.js):

if (Meteor.isClient) {
  Template.hello.events({
    'click .openModal': function (event,template) {
      $('#modalView')
          .modal({
            onDeny    : function(){
              console.log('canceled');
            },
            onApprove : function() {
              console.log("yeah!");
            }
          })
          .modal('show')
      ;
    }
  });
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

Router.route('/', function () {
    this.render('hello');
});

Ошибка:

TypeError: $dimmer.on is not a function
semanti...27ec43c (Line 5786)

Кто-нибудь знает, как это решить?


Ответы:


1

Корневой элемент, являющийся шаблоном, не является проблемой. Проблема в наличии тега BODY в шаблоне. Вы получаете два тега BODY, что приводит к двум диммерам $. Поэтому, когда вызывается $dimmer.on, это на самом деле массив, и код семантического пользовательского интерфейса должен вызывать $dimmer[i].on (где i будет 0 и 1), а это так не работает.

Поэтому измените hello.html на:

<template name="hello">
    <div class="delete openModal">OPEN<i class="close icon"></i></div>

    <div id="modalView" class="ui modal">
        <div class="content">
            <div class="ui fluid input">
                Modal Error Test
            </div>
        </div>
        <div class="actions">
            <div class="ui button cancel">Cancel</div>
            <div class="ui button ok">OK</div>
        </div>
    </div>
</template>

<template name="navigation">
    <div class="ui menu">
        <a class="item" id="home" href="/">
            <i class="home icon"></i> welcome
        </a>
    </div>
</template>

И создайте макет (layout.html):

<head>
  <title>Hello Error</title>
</head>

<body>
  <h1>Reproduce error</h1>
  {{> navigation}}
</body>

Это работает.

Конечно, вы можете просто удалить тег BODY из hello.html:

<template name="hello">
    <head>
        <title>Hello Error</title>
    </head>

    <h1>Reproduce error</h1>

    {{> navigation}}

    <div class="delete openModal">OPEN<i class="close icon"></i></div>

    <div id="modalView" class="ui modal">
        <div class="content">
            <div class="ui fluid input">
                Modal Error Test
            </div>
        </div>
        <div class="actions">
            <div class="ui button cancel">Cancel</div>
            <div class="ui button ok">OK</div>
        </div>
    </div>
</template>

<template name="navigation">
    <div class="ui menu">
        <a class="item" id="home" href="/">
            <i class="home icon"></i> welcome
        </a>


    </div>

</template>

Это тоже работает, но я думаю, что первый подход — это метод clean/Meteor.

21.05.2015
  • Большое спасибо! Это решило проблему, и объяснение очень хорошо помогает понять причину. 22.05.2015
  • Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..