Question

我在整个Web应用程序中使用Twitter Bootstrap的模态。我也使用Mustache模板生成要在模态中显示的信息。问题是，我发现自己为几乎每个渲染到屏幕的表单都创建了新的模态，我觉得这违反了DRY。我正在考虑创建一个在'window'对象中定义的全局模态对象，可以在我的应用程序中访问它。当我想要显示一个新表单时，我只需将表单呈现为全局模态对象然后显示它。谁能给我一些关于如何用模态更好地处理多种形式的建议？

Answer 1

我认为你有正确的想法。如果你有很多模态，创建新的模态可能会重复。我做了类似你提出的建议：创建一个可以重复用于各种模态的模态对象。

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

我会尝试提出一个非常基本的实现，而不必过多了解您的应用程序。

HTML基于Bootstrap示例here：

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

        <h3 id="dynamicHeader">
            <!-- Our header will go here -->
        </h3>
    </div>

    <div class="modal-body" id="dynamicBody">
        <!-- Our body will go here -->
    </div>

    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

请注意我添加到h3和div.modal-body的唯一ID。我们将使用JavaScript中的那些动态注入每个表单的标题和内容。

JavaScript的：

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! */
    };
}());

以下是一个示例用法！

HTML w / JavaScript：

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

最后，我把所有这些都包含在一个jsFiddle中，它展示了启动两种不同形式的能力。

链接：jsFiddle

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

你可以做更多的事情，但这基本上就是要点。我自己的实现暴露意味着动态配置按钮，例如。根据您想要配置的内容，您可以添加传递给modal（）函数的options参数，或者具有ModalManager可以处理的特定于您的应用程序的其他属性。你绝对可以使用模板来实现其中的一些功能，这对我设置的例子来说并不重要。

我希望有所帮助！

Answer 2

我不太确定你在问什么。 Mustache确实有循环功能，所以你可以传入一个模态数组，而Mustache应该生成所有的代码。

我实际上刚创建了一个视频，展示了如何为Twitter Bootstrap的Alert组件构建Mustache模板，并通过PHP和JavaScript实现它。它还具有我所说的循环功能。也许这会有所帮助？这是链接：http://mikemclin.net/mustache-templates-for-php-and-javascript/

众多具有动态内容的模态

2 个答案: