open singlePost._id page in modal with flow-router Meteor

Question

I have created the routes and the patFor to be able to reach mysite.com/post/id but instead of opening it in a new page I want this to be opened inside a modal and can't find how to do it with meteor and flow-router

The current way I link to the postId page is with the meteor add arillo:flow-router-helpers package:

<a href="{{pathFor '/post/:id' id=_id}}">Link to post</a>

but this will take me to my singlePost blaze template...I want that template to be opened in a modal instead of being a new page...so I changed that to :

<template name="spotPage">


<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        {{#if Template.subscriptionsReady}}
            {{#with thisPost}}
                <li>{{title}}</li>
                <li>{{country}}</li>

            {{/with}}
        {{else}}
            <p>Loading...</p>
        {{/if}}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
</template>

but how do I toggle that specific post._id with the modal and its data context?

thanks

score 0 · Answer 1 · answered Jan 04 '16 at 17:49

0

Before you launch the modal, set the postId using a session variable and then retrieve the postId in your Template helpers.

answered Jan 04 '16 at 17:49

Brendan Turner

430
2
12

Sorry, didn't understand...right now I am using a helper to return the specific post/ postId = Template.postPage.helpers({ thisPost: function() { // Get the single entry from the collection with the route params id var id = FlowRouter.getParam('id'); var post = Posts.findOne({ // Get the selected entry data from the collection with the given id. _id: id }) || {}; return post; } }); – AHH Jan 04 '16 at 18:03
But can't understand how to link to it so that it opens in a modal...to link to it before I was using the package that with only one line was linking to it Link to post – AHH Jan 04 '16 at 18:03
Modals don't have a path, so instead of `{{pathFor '/post/:id' id=_id}}` you'll need to call a function that launches a modal. You could do `launchPostModal(id)` – Brendan Turner Jan 04 '16 at 18:07
still having troubles figuring it out, if you can provide more hints, will help...I don't know how to get the Id of the specific post...I have 1000 post so in the launchmodal function each time will have to provide that speicfic post to render..totally lost haha – AHH Jan 04 '16 at 19:09
Supply the function with the post `_id` just like you did here: `{{pathFor '/post/:id' id=_id}}`, except with `launchPostModal(_id)` – Brendan Turner Jan 04 '16 at 19:25
Yep but that patFor is provided by a package arillo:flow-router-helpers I don't know the actual function that made that work...will keep looking, thanks for your time and learned from it! – AHH Jan 04 '16 at 19:59
pathFor supplies a link to the route. Since a modal does not require going to a new route in order to display you don't need to use pathFor. You need to launch a modal and supply it the post's _id. Good luck. – Brendan Turner Jan 04 '16 at 20:13

score 0 · Answer 2 · answered Jan 04 '16 at 22:41

To pass a variable to a modal, simply pass the parameter in the template:

for example if you have a Modal template called 'myModalTemplate' and you want to pass it a variable myVar, which should contain a variable available on the parent template as 'variable'

you would call it with

{{>myModalTemplate myVar=variable}}

then on click you open the modal and in the

Template.myModalTemplate.helpers({
     'myVariable': function() { return this.myVar; } 
})

(you should actually be able to access it directly with myVar in the modal Template)

score 0 · Answer 3 · answered Jan 05 '16 at 00:26

Here is the answer to my problem, found it from another resource:

<template name="listOfItems">
  {{#each item}}
    <a href="#" class="item-link" data-id="{{_id}}" />{{title}}</a>
  {{/each}}
</template>

<template name="viewItemModal">
  <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
    {{#if Template.subscriptionsReady}}
        <li>{{title}}</li>
        <li>{{country}}</li>
    {{else}}
        <p>Loading...</p>
    {{/if}}
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>
</template>

Template.listOfItems.events({
  'click .item-link': function(e,t){
    e.preventDefault();
    var itemId = e.currentTarget.dataset.id;
    var item = Items.findOne({_id:itemId});
    var title = item.title;
    var country = item.country;
    Modal.show('viewItemModal', {title:title, country:country});
  }
});

Also, this packageis what I use to pass the params to the modal....

open singlePost._id page in modal with flow-router Meteor

3 Answers3