流星 - 无法显示列表中的元素的弹出窗口小部件

Question

你好我正在使用流星+语义UI，但我认为这适用于其他基于JQuery的窗口小部件（Bootstrap）。我想为列表中的每个项目显示一个弹出窗口。问题出在我认为的初始化。

<!-- entity.html --> 
<template name="listEntities"> 
<div class="ui list"> 
    {{#each entities}} 
     <div class="item"> 
      <p> 
       {{> entityItem}} 
      </p> 
     </div> 
    {{/each}} 
</div> 
</template> 

<template name="entityItem"> 
<div class="small blue ui labeled icon buttons"> 
    <div class="ui button my-btn-entity"> 
     <i class="doc basic icon"></i> 
     {{name}} 
    </div> 
</div> 
<div class="small blue ui icon buttons"> 
    <div class="circular ui button my-btn-entity-info" data-content="{{description}}"> 
     <i class="info icon"></i> 
     &nbsp; 
    </div> 
</div> 
</template> 


//entity-client.js 
Template.listEntities.helpers({ 
    entities: function(){ 
     return Entities.find().fetch(); 
    } 
}); 

Template.listEntities.rendered = function(){ 
    //initialize popup 
    $('.my-btn-entity-info').popup(); 
}; 

Template.listEntities.events({ 
    'click .my-btn-entity-info': function(event){ 
     event.currentTarget.popup({ //ERROR OCCURS HERE 
      title: this.name, 
      content: this.description, 
      on: 'click' 
     }); 
    } 
}); 

当我点击信息按钮（类= MY-BTN-实体信息），我得到这个错误

遗漏的类型错误：未定义是不是一个功能实体client.js：75

Template.listEntities.events.click。我-BTN-实体信息

Answer 1

event.currentTarget返回一个DOM元素，而语义UI附着popup（等），以围绕DOM元素jQuery的包装。

所以，你需要做的：

$(event.currentTarget).popup({ 
    title: this.name, 
    content: this.description, 
    on: 'click' 
}); 

甚至更​​好：

'click .my-btn-entity-info': function(event, template){ 
    template.$(event.currentTarget).popup({ 
     title: this.name, 
     content: this.description, 
     on: 'click' 
    }); 
} 

，可确保您不小心拿起任何东西所关注的模板外，并应使事情运行边际（虽然不知不觉）更快，因为它不必遍历整个文档。

Answer 2

好吧，我尝试了很多东西。 这是为我工作的解决方法，绕过了我认为是nooitaf中的一个bug：Meteor的semantic-ui包。我在这里发布这个bug https://github.com/nooitaf/meteor-semantic-ui/issues/22

我的修复是一种解决方法 - 我切换到引导程序，并使用弹出。他们立即工作。我必须用Bootstrap而不是Semantic-UI来说，我的按钮看起来更好。我的想法。

meteor remove nooitaf:semantic-ui 
meteor add meteor add nemo64:bootstrap less 

请参阅https://github.com/Nemo64/meteor-bootstrap初始化Bootstrap模块。我不得不创建文件custom.bootstrap.json和切换这些为true：

"buttons":    true, 
"glyphicons":   true, 
"button-groups":  true, 
"popovers":    true, 

接下来我修改我的模板：

<!-- entity.html --> 
<template name="listEntities"> 
<div class="list"> 
    {{#each entities}} 
    <div class="item"> 
     <p> 
      {{> entityItem}} 
     </p> 
    </div> 
    {{/each}} 
</div> 
</template> 

<template name="entityItem"> 
<div class="btn-group"> 
    <button type="button" class="btn btn-primary"> 
     <span class="glyphicon glyphicon-book"></span> {{name}} 
    </button> 
    <button type="button" id="my-btn-entity-info-{{_id}}" class="btn btn-primary" data-container="body" data-toggle="popover" title="{{name}}" data-content="{{description}}"> 
     <span class="glyphicon glyphicon-info-sign"></span> 
    </button> 
</div> 
</template> 

最后，我使用了曾与semantic-初始化失败的最新版本用户界面，现在它可以工作。

//entity-client.js 
Template.entityItem.rendered = function() { 
    var infoItemSelector = "#my-btn-entity-info-" + this.data._id; 
    console.log(infoItemSelector); 
    $(infoItemSelector).popover(); 
};