动态内容的众多模态

Question

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

Answer 1

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

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

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

HTML从引导例如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> 

通知的唯一ID的我已经加入到h3和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! */ 
    }; 
}()); 

这里有一个例子使用！

HTML瓦特/ 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的，因为它应该包括对模式的引导代码。它将提取特定于每个表单的标题和正文HTML，并在DOM中填充常见模态HTML。然后当你启动模态时，它会显示看起来不同的模态，但是你已经集中了常见的方面，所以你不再重复它们了！

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

我希望有帮助！

Answer 2

我不太清楚你在问什么。胡须确实具有循环功能，所以你可以传入一组模式，而胡须应该生成所有的代码。

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