title: How to properly load a modal (bootstrap), which content changes based on the url, in a Meteor template without blinking the background page
body: <p>I want to load a modal where its content is based on an ID gotten from the <em>current URL</em>. The idea is that if that ID is not specified in the URL, and the rest of the URL remains the same, then no modal will appear (so no blinking) but if it was specified, then a modal will appear. In other words, <strong>open or close a modal based on the URL</strong>.</p>
  
  <p>In my project, the URL without loading a modal is the next one:</p>
  
  <pre><code>/:projectId/kanbas
  </code></pre>
  
  <p>But if the URL is:</p>
  
  <pre><code>/:projectId/kanbas/:cardId
  </code></pre>
  
  <p>Then the modal will appear using bootstrap javascript. Moreover, if we close the modal or change the URL to the previous one (keeping the same projectId value), then the page should remain intact without any blinking.</p>
  
  <p>In order to make it working, I have decided to create two controllers in the Iron Router. I am not sure if this is correct, but it I think it can be achieved with only one controller.</p>
  
  <pre><code>KanbanController = RouteController.extend({
      layoutTemplate: 'normalLayout',
      template: 'kanban',
      waitOn: function () {
          return Meteor.subscribe('Desktop', this.params.desktopId);
      },
      data: function () {
          return {
              desktop: Desktops.findOne({
                  _id: this.params.desktopId
              })
          };
      }
  });
  </code></pre>
  
  <p>And the other:</p>
  
  <pre><code>KanbanCardDetailController = KanbanController.extend({
      yieldTemplates: {
          KanbanCardDetail: {to: 'cardDetail'}
      },
      waitOn: function () {
          return Meteor.subscribe('Card', this.params.cardId);
      },
      data: function() {
          return {
              card: Cards.findOne({
                  _id: this.params.cardId
              })
              ,desktop: Desktops.findOne({
                  _id: this.params.desktopId
              })
          };
      }
  });
  </code></pre>
  
  <p>Notice that KanbanCardDetailController extends from KanbanController. Notice that the modal place is a template yield named <em>cardDetail</em>.</p>
  
  <p>The first controller would be loaded with the first URL, and the second one when there is a modal.</p>
  
  <p>As far as I tested, I think this approach is not correct because I am noticing a blinking when going from the first url to the second url (when loading a modal). I think the reason is that the waitOn callback from the second controller expects the Card document to be loaded <em>before</em> template rendering, but I was expecting that since the background template is not going to change it will not re-render it completely (because we already have it thanks to the previous url).</p>
  
  <p>What am I doing wrong here? What would be the best meteorjs modal approach to open and close modals based on the URL?</p>
  
  <p>My apologies if my English is not good enough but it is not my mother language. Thank you very much for your help and consideration.</p>