twitter-bootstrap – 如何使用Ember.js和Handlebars.js呈现(Twi
发布时间:2020-12-17 21:34:08 所属栏目:安全 来源:网络整理
导读:我很难找到使用Ember.Handlebars渲染以下标记的方法: div class="row-fluid" div class="span4"Item #1 (row #1 / column #1)/div div class="span4"Item #2 (row #1 / column #2)/div div class="span4"Item #3 (row #1 / column #3)/div/divdiv class="ro
我很难找到使用Ember.Handlebars渲染以下标记的方法:
<div class="row-fluid"> <div class="span4">Item #1 (row #1 / column #1)</div> <div class="span4">Item #2 (row #1 / column #2)</div> <div class="span4">Item #3 (row #1 / column #3)</div> </div> <div class="row-fluid"> <div class="span4">Item #4 (row #2 / column #1)</div> <div class="span4">Item #5 (row #2 / column #2)</div> <div class="span4">Item #6 (row #2 / column #3)</div> </div> <div class="row-fluid"> <div class="span4">Item #7 (row #3 / column #1)</div> </div> 使用纯JavaScript,我做过这样的事情: var array = ['Item 1','Item 2','Item 3','Item 4','Item 5','Item 6','Item 7'],output = '<div class="row-fluid">'; for (var i = 0,j = array.length; i < j; i++) { output += '<div class="span4">' + i + '</div>'; if ((i + 1) % 3 == 0) { output += '</div><div class="row-fluid">'; } } output += '</div>'; 理想情况下,我将它放在一个自定义Handlebars帮助器中(从而从模板中删除逻辑)但Ember documentation只解释了如何编写简单的帮助器,我真的不知道如何编写更复杂的块帮助程序而不会丢失属性绑定. 有没有人知道使用Twitter Bootstrap网格系统和Ember模型集合的最佳方法? 先感谢您!最好的祝福, 大卫 解决方法
G’day戴夫
而不是使用行和div来制作块网格尝试使用“无序列表” HTML <ul class="row-fluid block-grid-3"> <li>Item #1 (row #1 / column #1)</li> <li>Item #2 (row #1 / column #2)</li> <li>Item #3 (row #1 / column #3)</li> <li>Item #4 (row #2 / column #1)</li> <li>Item #5 (row #2 / column #2)</li> <li>Item #6 (row #2 / column #3)</li> <li>Item #7 (row #3 / column #1)</li> </ul> 然后CSS看起来像这样. ul.block-grid-3 { display: block; overflow: hidden; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ul.block-grid-3 > li { width: 33.33333%; float: left; padding: 0 12px 12px; display: block; height: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ul.block-grid-3 > li:nth-of-type(3n+1) { clear: left; } 然后,如果您想要更改为四个块,您可以将css更改为: ul.block-grid-4 > li { width: 25%; float: left; padding: 0 12px 12px; display: block; height: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ul.block-grid-4 > li:nth-of-type(4n+1) { clear: left; } jsfiddle example更强大的解决方案. 您还可以使用此方法查看此ember应用程序Open-pos产品是否布局. Zurb的css框架“基础”作为一个很好的解决方案叫做block-grid.这个系统很容易改变3 up网格其他数字只需要在css中稍作改动.你可以将block grid code放入你的bootstrap scss中.如果您有任何问题,请告诉我. 干杯 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |