поповер с MeteorJS

Question

Попробуйте использовать самозагрузки поповер с MeteorJS есть 2 проблемы:

1. Невозможно присвоить некоторое значение, приходя из коллекции для ввода значения
2. Я стараюсь, чтобы получить один поповер на html,body но есть каждый поповер на каждом шаблоне, это нормально, но я стараюсь делать только 1 поповер на 1 экране

у меня есть коллекция 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' 
}); 

EDIT: 2 проблема решена на 50%, я добавляю это, и теперь это сокрыто е, когда я открываю другой поповер, но тогда я должен нажать 2 раза на .trigger, чтобы показать новый поповер

$('.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

Вот anwser для вопроса 1 (присвоить значение из коллекции для ввода).

Вход в шаблон получает значение заголовка. Когда вы удаляете класс hide, вы можете увидеть название из коллекции. Но popover вставляет новые элементы в DOM. И эти новые элементы выводятся Bootstrap и не отображаются Blaze, поэтому вход не заполняется значением title.

Что вы можете сделать, это прикрепить обработчик события к popover, когда он будет показан. Что-то вроде этого:

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). Это придает и позволяет использовать его внутри обработчика событий, чтобы вы могли получить значение заголовка.

BTW, есть также событие hidden.bs.popover, когда закрывается popover.