Popover with MeteorJS

Try to use bootstrap popover with MeteorJS and have 2 troubles:

  1. Can't assign some value that coming from collection to input value
  2. I try to get one popover on html,body but have every popover on every template, it's normal, but I try to do only 1 popover on 1 screen

I have collection Posts with such documents 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'
});

EDIT: 2 problem solved for 50%, I add this, and now it's hide when I open another popover, but then I must click 2x on .trigger to show new 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');
    });

Answers


Here's an anwser for your question 1 (assign value from collection to input).

The input in the template gets the value of title. When you remove the hide class you can see the title from the collection. But a popover inserts new elements into the DOM. And those new elements are rendered by Bootstrap and not rendered by Blaze, so the input is not filled with the value of title.

What you can do is attach an event handler to the popover when it is shown. Something like this:

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

As you can see the event shown.bs.popover can be used to do some initialization. In the event handler the value for the input is set. It is important to have the jquery selector find your input in the popped form, that's why the selector starts with .popover-content. Otherwise it would set the value to the first input that was defined in the template.

Another thing to note is the use of bind(this). That attaches this and makes it usable inside the event handler so you can get the value of title.

BTW, there is also a hidden.bs.popover event when the popover is closing.


Need Your Help

How to construct a neural network in R using caret

r neural-network r-caret

So I've been using the caret package to perform stuff like MLR, stepwise regression and random forest through the use of the train function. I've done this so that I can also do 10 fold cross valid...

APNS+PHP - Fails to deliver message for more than about 200 tokens

php apple-push-notifications

I can send notifications to APNS for about first 200 device tokens in my database but after those the message get failed, Here is part of my log from my local server where the infliction occurs :