1

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

4

2 回答 2

1

我认为你的想法是正确的。如果您有很多模态，创建新的模态可能会变得重复。我已经做了与您提出的类似的事情：创建一个可重复用于各种模式的单一模式对象。

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

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

基于此处的 Bootstrap 示例的 HTML ：

<!-- 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和的唯一 ID div.modal-body。我们将在 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! */
    };
}());

这是一个示例用法！

带有 JavaScript 的 HTML：

<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 演示了启动两种不同形式的能力。

链接：jsFiddle

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

你可以做的还有很多，但这基本上是要点。例如，我自己的实现公开意味着动态配置按钮。根据您想要配置的内容，您可以添加传递给 modal() 函数的选项参数，或者具有 ModalManager 可以处理的特定于您的应用程序的其他属性。您绝对可以使用模板来执行其中一些功能，这对我设置的示例来说不是必需的。

我希望这会有所帮助！

于 2013-03-08T05:24:10.730 回答
0

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

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

于 2013-03-06T19:13:42.720 回答