Question

尝试使用MeteorJS的bootstrap popover并遇到2个问题：

无法指定从收集到输入值的某些值
我尝试在html,body上设置一个popover，但每个模板上都有一个popover，这是正常的，但我尝试在1个屏幕上只做一个popover

我的收藏集Posts包含此类文档Posts.insert({title:"Loli Pop"});

Meteor.publish("posts_levels", function(){
    return Posts.find();
});

<template name="www">
{{#each level}}
   {{> one}}
{{/each}}
</template>

Template.www.onCreated(function(){
  var self = this;
  self.autorun(function() {
      self.subscribe('posts_levels');
  });
 });

<template name="one">
    <div class="popover-markup">
        <div class=" trigger ">
            Edit
        </div>
    </div>
    <div class="content-popover hide">
        <form class="form">
            <input name="title" id="post_edit_title" value="{{title}}" />
        </form>
    </div>
</template>

Template.one.onRendered(function(){
    $('.popover-markup > .trigger').popover({
    html : true,
    content: function() {
        return $('.content-popover').html();
    },
    container: 'body',
    placement: 'right'
});

编辑： 2问题解决了50％，我添加了这个，现在当我打开另一个弹出窗口时它会隐藏，但是我必须在.trigger上点击2x来显示新的popover

$('.popover-markup > .trigger').popover({
    html : true,
    content: function() {
        return $('.content-popover').html();
    },
    container: 'body',
    placement: 'right'
    }).on("click", function(e){
        $('.trigger').not(this).popover('hide');
    });

Answer 1

这里是你的问题1的一个问题（从集合到输入分配值）。

模板中的输入获取title的值。删除hide课程后，您可以看到该集合中的标题。但是popover会在DOM中插入新元素。这些新元素由Bootstrap呈现，而不是由Blaze呈现，因此输入未填充title的值。

您可以执行的操作是在弹出窗口显示时将事件处理程序附加到该窗口。像这样：

Template.one.onRendered(function(){
$('.popover-markup > .trigger').popover({
        html: true,
        content: function () {
            return $('.content-popover').html();
        },
        container: 'body',
        placement: 'auto top'
    }).on('shown.bs.popover', function () {
        $('.popover-content #post_edit_title').val(this.data.title);
    }.bind(this));
});

正如您所看到的，事件shown.bs.popover可用于进行一些初始化。在事件处理程序中，设置输入的值。让jquery选择器以弹出形式查找输入非常重要，这就是选择器以.popover-content开头的原因。否则，它会将值设置为模板中定义的第一个输入。

需要注意的另一件事是使用bind(this)。附加this并使其在事件处理程序中可用，这样您就可以获得title的值。

顺便说一下，当弹出窗口关闭时，还有一个hidden.bs.popover事件。

Popflow与MeteorJS

1 个答案: