gpt4 book ai didi

javascript - 使用 Handlebars.js 创建网格的简单方法?

转载 作者:数据小太阳 更新时间:2023-10-29 04:14:04 26 4
gpt4 key购买 nike

我试图从这个数组中的对象生成一个 divs 五个元素宽的网格:

[{n:'a'},{n:'b'},{n:'c'},{n:'d'}...{n:'y'}];

该数组可能包含 1 到 50 个对象,数据格式是来自 Spine.js 模型的一维数组。为了分离数据和表示,我希望将数据保存在一维数组中,并使用 View ( Handlebars 模板)代码在每第 5 个项目上开始一个新行,如下所示:

<div class="grid">
<div class="row">
<div class="cell"> a </div>
<div class="cell"> b </div>
<div class="cell"> c </div>
<div class="cell"> d </div>
<div class="cell"> e </div>
</div>
<div class="row">
<div class="cell"> f </div>
etc...
</div>

我有一个解决方案,方法是在辅助函数中返回整个字符串。只有我的模板看起来像:

<script id="grid-template" type="text/x-handlebars-template">
{{#grid}}
{{/grid}}
</script>

这似乎违背了使用模板的意义。有没有一种简单的方法可以创建像上面这样的网格,代码主要位于模板中?

[编辑]解决方案

根据下面@Sime 的回答,修改 Controller 中的数据。

模板代码:

<script id="grid-template" type="text/x-handlebars-template">
{{#rows}}
<div class="row">
{{#cells}}
<div class="cell">
{{n}}
</div>
{{/cells}}
</div>
{{/rows}}
</script>

Controller 渲染代码():

  this.data=[{n:'a'},{n:'b'},{n:'c'},{n:'d'}...{n:'y'}]; // previously set
this.rows=[];
var step=5,
i=0,
L=this.data.length;
for(; i<L ; i+=step){
this.rows.push({cells:this.data.slice(i,i+step)});
};

this.el.html(this.template(this));

最佳答案

因此,模板将是:

<script id="template" type="x-handlebars-template">
<div class="grid">
{{#each this}}
<div class="row">
{{#each this}}
<div class="cell">{{n}}</div>
{{/each}}
</div>
{{/each}}
</div>
</script>

但是,此模板需要一个二维数组,因此您必须先转换数据对象。

function transform ( arr ) {
var result = [], temp = [];
arr.forEach( function ( elem, i ) {
if ( i > 0 && i % 5 === 0 ) {
result.push( temp );
temp = [];
}
temp.push( elem );
});
if ( temp.length > 0 ) {
result.push( temp );
}
return result;
}

现场演示: http://jsfiddle.net/emfKH/3/

关于javascript - 使用 Handlebars.js 创建网格的简单方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9270469/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com