javascript - handlebars + json 部分显示输出(拆分 json 数据？)

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;

我可以轻松做到的一种方法是将 3 个项目包裹(通过使用 slice())在一个 div 中，然后隐藏和显示。但是，此方法需要先加载整个批处理。

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

0: IMAGEFLOW

1: ENERSOL

2: BUNGA

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

Answer 1

如何创建 handlebars helper 以使用每个支持 from/to 参数，比如

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>

检查这个 fiddle 。它能解决您的问题吗？ http://jsfiddle.net/5kkja1ua/1/