Question

切换某个元素（由模板表示）是<body>的直接子元素的最佳方法是什么？

我正在谈论由某些用户事件或路线触发的模式框，通知，灯箱等。

示例：用户点击按钮后显示的简报注册对话框。通过将/edit附加到项目的路线来触发内容编辑的叠加

修改

我的第一个解决方案是使用Session来控制状态，然后在我的主布局模板末尾的#if语句中排列所有应用程序的模态和消息，如下所示：

<template name="layout">
  <!-- yields and stuff -->

  {{#if isActiveModal 'editArticle'}}{{> editArticle}}{{/if}}
  {{#if ...
</template>

问题在于模块化;如果队友正在某个页面模板中工作并需要显示特定的消息或对话框，则他或她必须编辑主布局以添加它。我希望有一种简单的方法可以有条件地将模板附加到<body>。

应该可以使用手头的工具，不应该吗？

Answer 1

我实际上在我的几个Meteor应用程序中使用了bootbox，它运行良好并且不会干扰任何Meteor的渲染。您可以以非阻止方式使用普通alert，confirm，prompt以及自定义dialog函数。有一个智能包：

https://github.com/TimHeckel/meteor-bootboxjs

请参阅我的一些应用和智能包以获取示例（bootbox.的grep）：

Answer 2

如果您使用最新版本的新模板引擎，则可以通过UI.body将body标记用作自己的特殊模板：

meteor update --release template-engine-preview-10.1

HTML：

<body>
  {{#with alert}}
    {{> modal}}
  {{/with}}
</body>

<template name="modal">
  <div class="modal">
    <a href="#" class="close">X</a>
    <p>{{message}}</p>
  </div>
</template>

JS：

if (Meteor.isClient) {
  UI.body.alert = function() {
    return Session.get("modal-alert");
  };

  UI.body.events({
    "click .close": function() {
      Session.set("modal-alert", null);
    }
  });
}

Answer 3

自从我发布问题以来，Blaze变得更加复杂。现在可以在DOM中的任何位置呈现元素，同时保持逻辑视图层次结构。见这个讨论：

https://forums.meteor.com/t/most-useful-meteor-apis/1560/8

我已经插入了下面的主要大纲 - 完整的主题也有代码示例。

...

[使用] Blaze.render在DOM中的任何位置输出模板 - 例如直接在<body>内的可调光包装器 - 同时保持开放模板的视图与之间的父子关系模态的看法。这种关系是他们直接沟通所必需的。

（请记住，Session变量以及其他限制只能包含可序列化数据......）

在层次结构完整的情况下，可以在模态和背景之间建立共享反应，并在另一方面调用方法。如果我们自愿使用Blaze.renderWithData，那么这两个模板甚至可以共享相同的数据上下文！

手动遍历视图层次结构非常繁琐，但使用aldeed:template-extension中的parent()方法，这不是一个问题。

取决于是否喜欢将模板实例用作视图模型＆＃39;或者更喜欢传递东西，两个模板之间的相互反应可以由分配给父模板实例或视图上的属性的new ReactiveVar调解，或者通过更多按需检索TemplateVar来调解。

使用块帮助器模板和关键字参数等技巧可以适当地填充Blaze.render的整个练习，以便一切都保持声明性。

在模板外动态渲染元素的最佳实践

3 个答案: