Handlebars - 动态传递值到if条件

Question

我正在使用Ember建立一个网站。在我的网站中，我必须根据以下json（从API接收）动态加载页面内容：

myData：[

{id：“1”，类型：“A”，文字：“Header1”}，{id：“2”，类型：“ B“，文字：”1“}，{id：”3“，类型：”B“，文字：”2“}，

{id：“4”，类型：“A”，文字：“Header2”}，{id：“5”，类型：“B”，文字：“3”}，

{id：“6”​​，类型：“A”，文字：“Header3”}，{id：“7”，类型：“B”，文字：“4”}，{id：“8”，类型：“B”，文字：“5”}

根据上述json值，我的页面必须符合以下设计：

Header1
1
2

Header2
3

Header3
4
5

那是：

• 首先，我需要迭代'myData'数组并检查 type 键的值。

• 如果 type 的值为 A - ＆gt;需要在标题

中显示其对应的'文本'键的值

• 如果 type 的值为 B - >需要在标题

下方显示其相应'文字'键的值

我的JsBin代码见：http://emberjs.jsbin.com/ujUfuru/1/edit

我已成功迭代并检索 text 的值，如下所示：

{{#each myData}}
    <li>
        {{text}}
    </li>
{{/each}}

现在，我需要检查数组中的值。

• 如果类型的值为A，则需要在标题中显示其对应的 '文字'键 的值，并且
• 如果类型的值为B，则需要在标题下方显示其对应的 '文字'键 的值。

尝试使用以下代码：

{{#each myData}}
   {{#isHeader type myData.type}}
       {{myData.text}}   //Header content - type A values
   {{else}}
       {{myData.text}}   //type B values
   {{/ifCond}}
{{/each}}

Ember.Handlebars.registerHelper('isHeader', function(key, value, options){
    if(value == 'A'){
        console.log("header");
        return true;
    }
    else
    {
        console.log("below header");
        return false;
    }
});

但是，类型条件检查不起作用。谁能指导我做错了什么？

{{#isHeader type myData.type}}

如何将类型的值动态传递给把手？ myData.type 似乎错了。

谢谢。

Answer 1

也许你可以试试这个实现：

模板：

<script id="test-template" type="text/x-handlebars-tempalte">
    {{#each myData}}
        {{{textProcessor this}}}
    {{/each}}
</script>

JS

var data = {myData : [{id:1,type:'A',text:"Header 1"},{id:2,type:'B',text:"1"},{id:3,type:'B',text:"2"},{id:4,type:'A',text:"Header 2"},{id:5,type:'B',text:"3"},{id:6,type:'A',text:"Header 3"},{id:7,type:'B',text:"4"},{id:8,type:'B',text:"5"}]};

Handlebars.registerHelper('textProcessor',function(obj){
  var isHeader = obj.type==="A"?true:false;
  if(isHeader){
    return "<h1>"+obj.text+"</h1>";
  }else{
    return "<span>"+obj.text+"</span>"
  }
});

var source= $("#test-template").html();
var template = Handlebars.compile(source);
var html = template(data);
$("#container").append(html);

截图：

我想你只想在不同的DOM元素中显示对象的文本值。

因此textProcessor助手将检查其类型并使用正确的元素返回文本。

我的例子是在一个纯粹的js环境中。 Ember.js使用标准把手lib，这也适用于你的项目。

希望这对你有所帮助。

  

编辑：如果你想以自己的方式实现这一目标。

模板

{{#each myData}}
  {{#isHeader type myData.type}}
    {{myData.text}}   //Header content - type A values
  {{else}}
    {{myData.text}}   //type B values
  {{/isHeader}}
{{/each}}

JS

Handlebars.registerHelper('isHeader',function(key,value,opt){
  if(value==="A"){
    console.log("header");
    return opt.fn(this);
  }
  console.log("below header");
  return opt.inverse(this);
});