CODEWITHSUNDEEP
javascriptjqueryjsonhandlebars.js
olo
olo

Reputation: 5271

handlebars + json to show output partially (split json data? )

Here is my code 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;

One method I can do it easily is to get 3 items wrapped (by using slice()) in a div and then hide and show. However, this method needs to load the whole lot first.

I'd like to know if possible to have the output to show every 3 items as a group? if possible to split the json data?

0: IMAGEFLOW

1: ENERSOL

2: BUNGA

then click next to show another 3 items and so on. Thanks

Upvotes: 3

Views: 676

Answers (1)

VadimB
VadimB

Reputation: 5711

What about to create handlebars helper to use each with suport from/to parameters, like

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('');
});

After that your template will looks like

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

Check this fiddle. Does it solve your problem? http://jsfiddle.net/5kkja1ua/1/

Upvotes: 3

Related Questions