如何使用Handlebarsjs模板进行基于列的元素集成..控制台的作品，但HTML不追加？ [英] How to make column based element integration using Handlebarsjs template.. console works but html not appending?

问题描述

使用一个数组，我想将它们全部拆分为5列..所以在实现后，我应该看到在我的html中附加了5列。

for我试图这样做，但我认为我的尝试本身错误..任何一个正确的我，并帮助我做5列模板请.. ..

我的尝试： p>

html：

 < div id =colParent> 
 
< / div> 
 
< script id =colMaketype =text / x-handlebars-template> 
 
 {{#moduloIf this.nations}} 
 
< div class =first> {{name}}< / div> 
< div class =first> {{name}}< / div> 
< div class =second> {{name}}< / div> 
< div class =third> {{name}}< / div> 
< div class =four> {{name}}< / div> 
 
 {{/ moduloIf}} 
 
 
< / script> 
  

code：

 < code $ var $ b $ countries $ {name：Afrikaans}，{name：Albanian}，{name：阿拉伯语}，{名称：阿拉伯语（阿根廷）}，{名称：阿拉伯语（巴林）}，{名称：南非荷兰语}，{名称：阿尔巴尼亚语}，{阿拉伯语}，{name：阿拉伯语（阿根廷）}，{名称：阿拉伯语（巴林）}，{名称：南非荷兰语}，{ {name：阿拉伯语}，{name：阿拉伯语（阿根廷）}，{name：阿拉伯语（巴林）}] 
} 
 Handlebars.registerHelper（ moduloIf，函数（arr，block）{
 
 $ .map（arr，function（val，i）{
 if（i％5 === 0）{
 console.log（zero，i，val）; 
 return block.fn（val）
} 
 else if（i％5 === 1）{
 console .log（one，i，val）; 
 return block.fn（val）
} 
 else if（i％5 === 2）{
 console。 log（two，i，val）; 
 return block.fn（val）
} 
 else if（ i％5 === 3）{
 console.log（thre，i，val）; 
 return block.fn（val）
} 
 else if（i％5 === 4）{
 console.log（four，i，val）; 
 return block.fn（val）
} 
 
}）
 
}）; 
 
 var temp = Handlebars.compile（$（＃colMake）。html（））; 
 
 $（＃colParent）。html（temp（obj））; 
  

在上面的尝试中，所有控制台都能正常工作。但如何整合到HTML？

这里演示： jsfiddle

解决方案返回的 $。map 正在被扔掉。你需要做的是，沿着这些方向做些什么：

  Handlebars.registerHelper（'moduloIf'，function（items，options）对于（var i = 0，l = items.length; i <1; ...），$ {
 var out =< ul>< ul class ='row'>; 
 
。 i ++）{
 if（i％5 == 0& i> 0）out + =< / ul>< ul class ='row'>; 
 out + = out +< li>+ options.fn（items [i]）+< / li>; 
} 
 
返回+< / ul> ;; 
}）; 
  

Using a array, i suppose to split all them in to 5 columns.. so after the implementation i should see the 5 column appended in my html.

for that i trying this, but i think my try itself wrong.. any one correct me and help me to make 5 columns template please..?

my try:

html :

 <div id="colParent">

</div>

<script id="colMake" type="text/x-handlebars-template">

{{#moduloIf this.nations}}

        <div class="first">{{name}}</div>
<div class="first">{{name}}</div>
<div class="second">{{name}}</div>
<div class="third">{{name}}</div>
<div class="four">{{name}}</div>

{{/moduloIf}}


</script>

code:

    var obj = {
    "nations" : [{"name":"Afrikaans"}, {"name":"Albanian"}, {"name":"Arabic"}, {"name":"Arabic (Argentina)"}, {"name":"Arabic (Bahrain)"},{"name":"Afrikaans"}, {"name":"Albanian"}, {"name":"Arabic"}, {"name":"Arabic (Argentina)"}, {"name":"Arabic (Bahrain)"},{"name":"Afrikaans"}, {"name":"Albanian"}, {"name":"Arabic"}, {"name":"Arabic (Argentina)"}, {"name":"Arabic (Bahrain)"}]
}
Handlebars.registerHelper("moduloIf", function(arr,block) {

    $.map(arr, function(val,i){
        if(i % 5 === 0){
            console.log("zero", i, val);
            return block.fn(val)
        }
        else if(i % 5 === 1){
            console.log("one", i, val);
            return block.fn(val)
        }
        else if(i % 5 === 2){
            console.log("two", i, val);
            return block.fn(val)
        }
        else if(i % 5 === 3){
            console.log("thre", i, val);
            return block.fn(val)
        }
        else if(i % 5 === 4){
            console.log("four", i, val);
            return block.fn(val)
        }

    })

}); 

var temp = Handlebars.compile($("#colMake").html());

$("#colParent").html(temp(obj));

in the above try, all the console works fine. but how to integrate to html?

demo here: jsfiddle

解决方案

The returns of the $.map are being thrown away. You need to, instead, do something along these lines:

Handlebars.registerHelper('moduloIf', function(items, options) {
  var out = "<ul><ul class='row'>";

  for(var i=0, l=items.length; i<l; i++) {  
    if( i % 5 == 0 && i > 0 ) out += "</ul><ul class='row'>";
    out += out + "<li>" + options.fn(items[i]) + "</li>";
  }

  return out + "</ul>";
});

这篇关于如何使用Handlebarsjs模板进行基于列的元素集成..控制台的作品，但HTML不追加？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！