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

использование семантического-интерфейс окна модальный не работает, если корневой элемент является шаблоном Метеор:Ошибка в Meteor/Semantic-UI?

пакет: семантико-щ-CSS

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

hello.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)

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

источник

2015-05-21 elCapitano

Корневой элемент, являющийся шаблоном, не является проблемой. Проблема заключается в том, что тег BODY в шаблоне. Вы заканчиваете двумя тегами BODY, что приводит к наличию двух диммеров. Поэтому, когда вызывается $ dimmer.on, на самом деле это массив, а код семантического ui должен вызывать $ dimmer [i] .on (где я бы был 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>

Это тоже работает, но я думаю, что первый подход является чистым/Meteor путь.

источник

2015-05-21 18:36:17

спасибо! Он решил проблему, и объяснение очень хорошо, чтобы понять причину. – elCapitano

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

ответ

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