Skip to content

rasmusbp/handlebarhelpers

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#Handlebars helpers A collection of useful helpers

##_every.js

Iterates through an array and adds CSS helper classes and index indicator

You can pass in two optional options to the helper function:

  • group Let's you specify a segment within the dataset
  • prefix Let's you prefix all the CSS classes with a "namespace". Use this to avoid style conflicts.

The helper always returns the following properties along with original data:

  • _index Index position of iteration. (zero indexed)

  • _number Current nummber in iteration. (not zero indexed)

  • _total Total length of array. Useful for rendering e.g. amount indicators, like: "3 out of 11".

  • _child CSS helper classes indicating the position in list: "odd", "even", "first-child" and "last-child".

And if a "group" option is passed to the helper, these properties will be returned as well:

  • _group CSS helper classes that adds the ability to divide output into segments. Adds the following classes based on current position: group[n]", "first-group-item" and "last-group-item"

  • _groupId Same as _group, but containing only the group ID.

  • _firstGroupItem Boolean indicating if the iteration is positioned on the first item within a group. Useful if you need to add conditional markup or CSS classes.

  • _lastGroupItem Same principle as _firstGroupItem.

###Usage

####Data

var items = [
    "Milk",
    "Egg",
    "Butter",
    "Knife",
    "Fork",
    "Spoon"
];

####Template

<ul>
    {{#every . group="3" prefix="ns"}}
        <li class="{{_child}} {{_group}}">
            <p>{{.}}</p> 
        </li>
        {{#if _lastGroupItem}}
        <li data-group="{{_groupId}}" class="{{_child}} add-all">
             <a href="#">add all above items</a>
        </li>
        {{/if}}
    {{/every}}
</ul>

####Output

<ul>
    <li class="ns-odd ns-first-child ns-group1 ns-first-group-item">
        <p>Milk</p>
    </li>
    <li class="ns-even ns-group1">
        <p>Egg</p>
    </li>
    <li class="ns-odd ns-group1 ns-last-group-item">
        <p>Butter</p>
    </li>
    <li data-group="ns-group1" class="ns-even add-all">
         <a href="#">add all above items</a>
    </li>
    
    <li class="ns-odd ns-group2 ns-first-group-item">
        <p>Knife</p>
    </li>
    <li class="ns-even ns-group2">
        <p>Fork</p>
    </li>
    <li class="ns-odd ns-last-child ns-group2 ns-last-group-item">
        <p>Spoon</p>
    </li>
    <li data-group="ns-group2" class="add-all">
         <a href="#">add all above items</a>
    </li>
</ul>

About

Handlebars helpers

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published