在模板外部动态呈现元素的最佳做法

切换<body>的直接子元素的某种元素（由模板表示）的存在的最佳方式是什么？在模板外部动态呈现元素的最佳做法

我在说一个模式框，通知，灯箱等由某些用户事件或路由触发。

示例：用户单击按钮后显示的简报注册对话框。覆盖的内容编辑由附加/edit到该项目的路由触发

编辑：

我虽然中使用会话控制状态，然后排队的所有应用程序的情态动词的第一个解决方案， #if声明在我的主要布局模板的末尾，如下所示：

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

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

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

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

来源

2014-01-21 dalgard

目前，没有一些额外的丑陋到您的代码不容易做，检查我的答案这个类似的问题：http://stackoverflow.com/questions/19955055/modal-bootstrap-disapear-with-change-event-流星/ 19965346＃19965346这个“模式”用于“派对”流星核心的例子，所以它是官方的解决方法，直到新的渲染引擎准备就绪。因此，要切换对话框的存在，您目前必须使用Session变量和动画（淡入/淡出）是无缝集成的一种痛苦。在不久的将来，我们将能够依靠经典的jQuery类切换。 – saimeunt

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

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

我下面插入主体轮廓 - 完整牙也有代码示例。

...

[使用方法] Blaze.render输出在任何地方DOM的模板 - 如可调光包装里面直接<body> - 同时保持开放的观点之间的父子关系模板和模态的视图。这种关系是他们直接沟通所必需的。

（记住，一个Session变量，其他的限制之中，只能容纳序列化的数据......）

随着层次完整，有可能建立的模式和背景和呼叫之间共享的反应另一方面也是如此。如果我们自愿使用Blaze.renderWithData，那么这两个模板甚至可以共享相同的数据上下文！

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

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

整个练习与Blaze.render可以通过使用像块助手模板和关键字参数这样的技巧适当地封装，以便一切都保持声明。

来源

2015-04-15 09:32:19 dalgard

我实际上在我的几个Meteor应用程序中使用bootbox，它工作的很好，不会干扰任何流星的渲染。您可以以非阻塞的方式使用正常的alert,confirm,prompt以及自定义的dialog函数。有可用的智能包装：

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

看到一些我的应用程序和智能包为例子（grep命令bootbox.）：

来源

2014-01-21 17:10:08

这是一个很好的答案，但该项目不使用Bootstrap。我正在寻找一个普遍的模式。 – dalgard

如果您使用最新版本的新模板引擎，你可以用身体标记作为自己特殊的模板，通过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-21 20:44:46 sbking

谢谢，但看到上面的编辑。我认为这是同样的解决方案。 – dalgard

在模板外部动态呈现元素的最佳做法

回答

相关问题