jq-repeat

jq-repeat

A simple, yet highly customizable plugin to handle all of you're client-side repetitive DOM needs. Simple, quick and powerful templating. It is modeled after ng-repeat and shares some basic syntax, but is not a clone.

• To do list demo
• Reddit JSON feed demo

Requirements

• jq-repeat requires jQuery 1.x/2.x and Mustache 1.x to run.

Template

To set up a jq-repeat template, write any element tag you wish to repeat once where you want the repeating to start, this will serve as the template and starting point.

Simply add a jq-repeat attribute with a unique value for the reference name for that template, in this case toDo.

<ul>
    <li jq-repeat="toDo">
        <span class="item">{{ item }}</span> {{{ done }}}
    </li>
</ul>

Just like mustache, to add variables use double brackets with the name inside.

Insert

Now that you have a template set up, let's populate the template use $.scope.toDo.push()

$.scope.toDo.push( { item: 'Get milk', done: 'Yes' } )

You can add any number of objects as arguments you wish and each will create a new element from the template. Values must be supplied as objects with keys corresponding to the variable names used in the template.

$.scope.toDo.push({
    item: 'Collect underwear',
    done: 'Yes'
}, {
    item: '?',
    done: 'No'
}, {
    item: 'Profit',
    done: 'No'
});

Methods

The repeat object can take many methods used for arrays, as arrays are the internal data structure.

• $.scope.toDo.splice(index [,howMany] [,ToAdd]) functions exactly as a regular array with notable difference. If the index propriety is set a string can be passed as the value of the index.
• index Type: Number or String Index of element you wish to manipulate. If the .index property is set, you may pass a string to match to the index array.
• howMany Type: Number Number of repeat objects that will be removed. If there are non to be removed, it is not required to use this argument.
• update Type: Array This is the array of repeat objects to add. If there are none to this is not required.
• returns Type: Array This function will return an array of deleted elements.
• $.scope.toDo.pop() Will remove and return the last element in the repeat array
• $.scope.toDo.reverse() Will reverse the repeat array by index number.todo: if .index is a number, will use that. Returns the newly formated array.
• $.scope.toDo.shift() works the same as regular arrays.
• $.scope.toDo.loop() will take the last value and insert in the front. toDo.loopUp() does the opposite. Returns the newly formated array.
• $.scope.toDo.indexOf( key, value ) Returns the array index number of the matching element. Mostly used for internals.
  • key Type: String The key element to match.
  • value Type: String The value of the matching element.
• $.scope.toDo.update( key, [value,] update) Updates selected value with new data. The selection process is done by matching key, value pairs from the existing objects,
  • key Type: String or Number The key or index to the matching element to update
  • value Type: String The value of the matching key to the element to be update.If the index number will be used, must be ommited!
  • update Type: Object This is the object that will be applied to the matching element.
• $.scope.toDo.__put is the function that will run when a element is being inserted. This must be a function and must include this.show(), or some other way of un-hiding 'this'.
• $.scope.toDo.__take is the function that will run when an element is being removed. This must be a function and include this.remove() or some other way to remove 'this'.
• $scope.toDo.__index is the propriety that defines the object key to use an the index. If this is set, a string can be used in place of a number for any index reference.

Credits

• Written by William Mantly
• Big thanks to Derek Hu for creating NPM and bower package, and other general house keeping.
• Also, thanks to Raja Kapur for advice and guidance.