2

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

我说的是由某些用户事件或路由触发的模态框、通知、灯箱等。

示例：用户单击按钮后显示的时事通讯注册对话框。/edit通过附加到项目的路线触发的内容编辑覆盖


编辑：

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

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

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

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

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

4

3 回答 3

0

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

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

有关示例，请参阅我的一些应用程序和智能包（grep for bootbox.）：

于 2014-01-21T17:10:08.573 回答
0

如果您使用最新版本的新模板引擎，您可以通过以下方式将 body 标签作为其自己的特殊模板UI.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);
    }
  });
}
于 2014-01-21T20:44:46.733 回答
0

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

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

我在下面插入了主要大纲——完整的线程也有代码示例。

...

[使用]Blaze.render在 DOM 中的任何位置输出模板——例如直接在内部的可调光包装器中<body>——同时保持打开模板的视图和模态视图之间的父子关系。他们需要这种关系才能直接沟通。

（请记住Session，除其他限制外，变量只能保存可序列化数据......）

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

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

根据是否喜欢将模板实例用作“视图模型”或喜欢传递东西，两个模板之间的交互反应可以通过new ReactiveVar分配给父模板实例或视图上的属性，或者通过更多按需检索TemplateVar。

整个练习Blaze.render可以通过使用块帮助模板和关键字参数等技巧适当地封装，以便所有内容都保持声明性。

于 2015-04-15T09:32:19.233 回答