在模板外部動態呈現元素的最佳做法

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

在模板外部動態呈現元素的最佳做法

回答

相關問題