Question

这是我的代码http://jsfiddle.net/5kkja1ua/

<ul id="results"></ul>

<script type="text/x-handlebars-template" id="item_tmpl">
    {{#json}}
    <p>     {{index}}: {{title}} </p>
    {{/json}}

    <button>next</button>
</script>

var dataObject = {
  json:[
  {
    "index": 0,
    "title": "IMAGEFLOW"
  },
  {
    "index": 1,
    "title": "ENERSOL"
  },
  {
    "index": 2,
    "title": "BUNGA"
  },
  {
    "index": 3,
    "title": "BITENDREX"
  },
  {
    "index": 4,
    "title": "MAROPTIC"
  },
  {
    "index": 5,
    "title": "AEORA"
  },
  {
    "index": 6,
    "title": "PYRAMIA"
  },
  {
    "index": 7,
    "title": "ANIXANG"
  },
  {
    "index": 8,
    "title": "SNORUS"
  }
]
}; 

var tpl_source = $("#item_tmpl").html();
var h = Handlebars.compile(tpl_source);
var content = h(dataObject);

// output
var results = document.getElementById("results");
results.innerHTML = content;

我可以轻松完成的一种方法是在div中包含3个项目（使用slice()），然后隐藏和显示。但是，这种方法需要先加载整个批次。

我想知道是否可以将输出显示为每组3项？如果可能分割json数据？

0: IMAGEFLOW

1: ENERSOL

2: BUNGA

然后单击“下一步”以显示另外3个项目，依此类推。感谢

Answer 1

如何创建把手助手以使用每个带有来自/参数的参数，例如

Handlebars.registerHelper('each_from_to', function(ary, from, max, options) {

    from || (from = 0);
    var result = [ ];

    for(var i = from; i < from + max && i < ary.length; ++i)
        result.push(options.fn(ary[i]));

    return result.join('');
});

之后，您的模板将显示为

<script type="text/x-handlebars-template" id="item_tmpl">
    {{#each_from_to json startFrom rowsOnPage}}
    <p>     {{index}}: {{title}} </p>
    {{/each_from_to}}
</script>

检查这个小提琴。它能解决你的问题吗？ http://jsfiddle.net/5kkja1ua/1/

把手+ json部分显示输出（拆分json数据？）

1 个答案: