1

How can I pass a variable defined in a controller to a popover defined in the corresponding template? So, I have a pretty standard bootstrap popover defined in my project like so:

li tag that triggers the popover

<li data-container="body" data-toggle="popover" data-placement="left" data-popover-content="#earnings">
  <div><img {{bind-attr src="this.photo"}}></div>
</li>

#earnings div for data-popover-content

<div id="earnings" class="hidden">
   {{#each controller_variable}}
     //code
   {{else}}
     //code
   {{/each}}
</div>

controller_variable

controller_variable: function(){
  var information; //pseudo-code
  return information;
}.property()

javascript to handle popover

<script type="text/javascript">
  $(function(){
    $("[data-toggle=popover]").popover({
      html : true,
      content: function() {
        var content = $(this).attr("data-popover-content");
        return $(content).html();
      }
    });
  });
</script>

The controller_variable contains 5 objects in an array, but the {{else}} block is being displayed meaning there is nothing in controller_variable.

I feel like it has something to do with the fact that the popover content is hidden, but is there a standard way of what I'm trying to do? Let me know if something's not clear.

Siguza
  • 21,155
  • 6
  • 52
  • 89
Peter Kim
  • 193
  • 1
  • 16
  • You shouldn't place the popover code outside view or component. I would recommended you to use preprepared bootstrap popover compontent. It is not going to work, because you probably lost some bindings. – Mateusz Nowak Jan 16 '15 at 20:59
  • i wanted to do the same thing and ended up using a dropdown menu instead of a popover. to do this, you need to handle the opening/closing yourself. see http://stackoverflow.com/questions/25089297/ http://stackoverflow.com/questions/1403615/ – Alexander Taylor Jan 30 '15 at 04:37

0 Answers0