使流星模态成为动态的

Question

我正在使用模态模板（也许我不应该这样做？）。在屏幕上，我有一个产品列表。当用户点击产品时，我希望模式打开带有该给定产品详细信息的窗口。

现在，我要做的是更新模态的订阅。但是，当模式打开时，OnCreate() 和 OnRender() 不会触发。现在，当父模板（产品列表）首次打开时，模式的渲染、OnRender、创建和 onCreated 都会触发。我需要它在单击产品并显示模式时发生。

我攻击错了吗？还是我只需要将我的订阅定位在模式中的其他地方？

（添加代码 - 非常简单）

<template name="parent">
    ...
    <div class="row form-row">
        <div class="col-sm-12 text-right">
            <a class="btn btn-outline" type="button" id="remove">Remove</a>
        </div>
    </div>
    {{> productEditModal}}
</template>

<template name="productEditModal">
    <div class="modal inmodal" id="productEditModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
...

Template.parent.events({

...

"click #aEditProduct": function (e) {
    e.preventDefault();

    Session.set("productId", this._id);

    $('#productEditModal').modal('toggle');
    $('#productEditModal').modal('show');

Template.productEditModal.onRendered(function() {

    var self = this;
    self.autorun(function() {
        self.subscribe("products", Session.get("bid"), function() {
            var bProduct = BoardProducts.findOne(Session.get("productId")); // some reactive operation
            // do fun stuff with thing
        });
    });

});

Answer 1

好的，假设你这样做了，我会这样处理 meteor add peppelg:bootstrap-3-modal

父模板：遍历产品并显示预览

<template name="parent">
  {{#each products}}
    {{name}}
    {{pic}}
    etc...
    <a class="btn show-details" type="button">show details</a>
  {{/each}}
</template>

创建详细信息模式

<template name="productDetailsModal">
  <div class="modal" id="productDetailsModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          Details for product {{name}}
          ...

return 产品光标的父模板助手：

Template.parent.helpers({
  products() {
    return Products.find();
  },
})

显示每个产品详细信息模式的事件

Template.parent.events({
  'click .show-details'() {
    Modal.show('productDetailsModal', this);
  },
})

这是我随手写的，没有测试。让我知道它是否适合你。

使流星模态成为动态的

Getting a meteor modal to be dynamic

modal-dialog

dynamic

meteor

bootstrap-modal