Search code examples
javascripthtmlhandlebars.jsmustachepartial

mustache Handlebars.js partial get all objects in list


I have a list of objects (this list structure needs to stay the same)

I want to pass to my html partial all the data for example title intro and the rest from ranges

My partial within my html is

{{> range-list range-list-page.ranges}}

I need to get all data from the object list (ranges), this works if I remove bigbob2 and bigbob3 however I need them to call in bigbob2 bigbob3 later in a different partial.

when I change my partial to be

{{> range-list range-list-page.ranges.bigbob2}}

I get the data for bigbob2as expected, however I need to get the data from bigbob2 and bigbob3 how would I do this?

so all I need is to call bigbob2 and bigbob3. for example.

{{> range-list range-list-page.ranges.bigbob2,bigbob3}}

my json array

"ranges": {
  "bigbob": [
    {
      "title": "brain patter",
      "intro": "fghtfhthd ",
      "slider": {
        "slides": [
          "//train-pool.jpg"

        ],
        "thumbnails": [
          "//train-blue.jpg"
        ]
      },
      "price": "xxx",
      "promo": [
        "xxx"
      ],
      "colors": [
        {
          "color": "#FFFFFF",
          "label": "Ice",
          "bordered": true,
          "href": "/jjhj.html"
        },
        {
          "color": "#A1ABAA",
          "label": "Azure",
          "href": "/kkkkjjj.html"
        },
        {
          "color": "#726B65",
          "label": "Graphite",
          "href": "/ppp.html"
        }
      ]
    }
  ],
  "bigbob2": [
    {
      "title": "hill",
      "intro": "ojhuohiuphipj.",
      "slider": {
        "slides": [
          "//image/two.jpg"
        ],
        "thumbnails": [
          "//my-image-bee.jpg"
        ]
      },
      "price": "xxx",
      "promo": [
        ""
      ],
      "colors": [

        {
          "color": "#f4eef0",
          "label": "grey",
          "href": "/gg.html"
        },
        {
          "color": "#d8d7d5",
          "label": "blue",
          "href": "/tt.html"
        }
      ]
    }
  ]

},

Solution

  • You can use the withBefore handlebar helper.

    {{#withBefore range-list-page.ranges 3}}
      {{>range-list this}}
    {{/withBefore}}
    

    Also if you want to use the partial with every pair from the array, you can use the withGroup handlebar helper. Like this:

    {{#withGroup range-list-page.ranges 2}}
      {{#each this}}
        {{>range-list .}}
      {{each}}
    {{/withGroup}}