Question

您好我正在使用Meteor + Semantic 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'
        });
    }
});

当我点击信息按钮（class = my-btn-entity-info）时，我收到此错误

未捕获的TypeError：undefined不是函数entity-client.js：75

Template.listEntities.events.click .my-btn-entity-info

Answer 1

event.currentTarget返回一个DOM元素，而Semantic-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的一个错误：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-ui失败的最新版本的初始化，现在它可以正常工作。

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

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

2 个答案: