使用flow-router Meteor模式打开singlePost._id页面

Question

我已经创建了路由和patFor，以便能够访问mysite.com/post/id，但我不是在新页面中打开它，而是希望在模式中打开它，并且找不到如何使用meteor和流路由器来实现这一点

我当前链接到postId页面的方式是使用meteor add arillo:flow-router-helpers包：

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

但这将把我带到我的singlePost blaze模板...我希望该模板在模式中打开，而不是我更改为的新page...so：

<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>

但是，如何将特定的post._id与模态及其数据上下文进行切换呢？

谢谢

Answer 1

在启动模式之前，使用会话变量设置postId，然后在模板助手中检索postId。

Answer 2

要将变量传递给模态，只需在模板中传递参数：

例如，如果你有一个名为'myModalTemplate‘的模态模板，并且你想给它传递一个变量myVar，它应该包含一个在父模板上作为' variable’可用的变量

您可以用以下命令调用它

{{>myModalTemplate myVar=variable}}

然后单击打开模式，然后在

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

(您实际上应该能够在modal模板中使用myVar直接访问它)

Answer 3

这是我的问题的答案，是从另一个资源中找到的：

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

另外，这是我用来将参数传递给模式的packageis……