Bug in Meteor/Semantic-UI?

the usage of a semantic-ui modal window does not work if the root-element is a meteor template:

package: semantic-ui-css

Error reproduction:

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>

And in Javascript (hello.js) code:

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');
});

The error is:

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

Does anyone know how to solve this?

The root element being a template is not the problem. The problem is having the BODY tag in the template. You wind up with two BODY tags, which leads to having two $dimmers. So when $dimmer.on is called, it is actually an array and the semantic-ui code would have to call $dimmer[i].on (where i would be 0 and 1) and it doesn't work that way.

So change hello.html to:

<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>

And create a layout (layout.html):

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

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

That works.

Of course you could just remove the BODY tag from 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>

That works too, but I think the first approach is the clean/Meteor way.

来源：https://stackoverflow.com/questions/30373124/bug-in-meteor-semantic-ui

标签

javascript

meteor

semantic-ui