Templates 具有动态内容的许多情态动词_Templates_Twitter Bootstrap_Modal Dialog_Mustache

Templates 具有动态内容的许多情态动词

templates twitter-bootstrap

Templates 具有动态内容的许多情态动词,templates,twitter-bootstrap,modal-dialog,mustache,Templates,Twitter Bootstrap,Modal Dialog,Mustache,我在整个web应用程序中使用Twitter引导的modals。我还使用了小胡子模板来生成显示在modals中的信息。问题是，我发现自己为几乎每个呈现到屏幕上的表单创建了新的模态，我觉得这违反了DRY。我正在考虑创建一个全局模态对象，该对象在“窗口”对象中定义，可以在整个应用程序中访问。当我想显示一个新的表单时，我只是将表单渲染到全局模态对象中，然后显示它。有谁能给我一些建议，告诉我如何更好地使用情态动词处理大量的表单吗？我不太清楚你在问什么。Mustache确实具有循环功能，因此您可以传入一个m

我在整个web应用程序中使用Twitter引导的modals。我还使用了小胡子模板来生成显示在modals中的信息。问题是，我发现自己为几乎每个呈现到屏幕上的表单创建了新的模态，我觉得这违反了DRY。我正在考虑创建一个全局模态对象，该对象在“窗口”对象中定义，可以在整个应用程序中访问。当我想显示一个新的表单时，我只是将表单渲染到全局模态对象中，然后显示它。有谁能给我一些建议，告诉我如何更好地使用情态动词处理大量的表单吗？

我不太清楚你在问什么。Mustache确实具有循环功能，因此您可以传入一个modal数组，Mustache应该生成所有代码

实际上，我刚刚创建了一个视频，展示了如何为Twitter引导的警报组件构建一个小胡子模板，并通过PHP和JavaScript实现它。它还具有我提到的循环功能。也许这会有帮助？这是链接：

我不太清楚你在问什么。Mustache确实具有循环功能，因此您可以传入一个modal数组，Mustache应该生成所有代码

我想你的想法是对的。如果你有很多情态动词，创建新的情态动词可能会变得重复。我做了一些类似于您所建议的事情：创建一个可用于各种模态的单一模态对象

过去我使用jQuery对话框，但原理完全相同。使用一些样板HTML创建一个JavaScript模块，您可以使用它来显示任意数量的表单（基本上是HTML内容）

我将尝试在不太了解您的应用程序的情况下提出一个非常基本的实现

基于HTML的自举示例：

下面是一个示例用法

带JavaScript的HTML：

var ModalManager = (function() {
    // cache some DOM references
    var $dynamicHeader = $('#dynamicHeader');
    var $dynamicBody = $('#dynamicBody');
    var $myModal = $('#myModal');

    var launch = function(header, body) {
        $dynamicHeader.html(header);
        $dynamicBody.html(body);
        $myModal.modal(/* options here */);
    };

    return {
        launch: launch
        /* expose more API methods here! */
    };
}());

<div id="form1">
    <div class="formHeader">
        Form One
    </div>

    <div class="formBody">
        <p>Html and stuff</p>
    </div>
</div>

<script type="text/javascript">
    // Using a closure to protect globals
    // This would probably go in your click handler to launch a given modal
    (function() {
        var headerHtml = $('form1 .formHeader').html();
        var bodyHtml = $('form1 .formBody').html();
        ModalManager.launch(headerHtml, bodyHtml );
    }());
</script>


表格一
Html和其他东西
//使用闭包保护全局对象
//这可能会进入单击处理程序以启动给定的模式
（功能（）{
var headerHtml=$（'form1.formHeader'）.html（）；
var bodyHtml=$（'form1.formBody'）.html（）；
启动（headerHtml、bodyHtml）；
}());

最后，我将所有这些都封装在一个JSFIDLE中，它演示了启动两种不同表单的能力

链接：

我使用jQuery，因为它应该包含在model的引导代码中。它将提取特定于每个表单的标题和正文HTML，并在DOM中填充您的通用模式HTML。然后，当您启动模式时，它将显示看起来不同的模式，但是您已经集中了公共方面，因此不再重复它们

你可以做的还有很多，但这基本上就是要点。例如，我自己的实现公开了动态配置按钮的方法。根据您想要配置的内容，您可以添加传递到modal（）函数的options参数，或具有ModalManager可以处理的特定于应用程序的其他属性。您完全可以使用模板来实现其中的一些功能，这对于我所设置的示例来说并不是必需的

我希望这有帮助

我认为你的想法是对的。如果你有很多情态动词，创建新的情态动词可能会变得重复。我做了一些类似于您所建议的事情：创建一个可用于各种模态的单一模态对象