Reformat

README.md

@@ -1,34 +1,45 @@
-# jq-repeat [![Build Status](https://travis-ci.org/wmantly/jq-repeat.svg)](https://travis-ci.org/wmantly/jq-repeat)
+# jq-repeat
+
+Author William Mantly Jr <wmantly@gmail.com>
+
 
-[![Join the chat at https://gitter.im/wmantly/jq-repeat](https://badges.gitter.im/wmantly/jq-repeat.svg)](https://gitter.im/wmantly/jq-repeat?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 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](http://jsfiddle.net/wmantly/nLj6nr4q/)
-* Reddit JSON feed [demo](http://jsfiddle.net/wmantly/sge3zr28/)
+- To do list [demo](http://jsfiddle.net/wmantly/nLj6nr4q/)
+- Reddit JSON feed [demo](http://jsfiddle.net/wmantly/sge3zr28/)
 
-# Requirements 
+# Requirements
 
-* __jq-repeat requires [jQuery](http://jquery.com/) 1.x/2.x and [Mustache](https://github.com/janl/mustache.js) 1.x to run__.
+- **jq-repeat requires [jQuery](http://jquery.com/) 1.x/2.x/3.x and [Mustache](https://github.com/janl/mustache.js) 1.x/2.x/3.x/4.x to run**.
+
+## Examples
+Some simple examples of each methods that can used.
+[examples](https://github.com/wmantly/jq-repeat/tree/master/example)
 
 ## 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`. 
+Simply add a `jq-repeat` attribute with a unique value for the reference name for that template, in this case `toDo`.
+
 ```html
 <ul>
-    <li jq-repeat="toDo">
-        <span class="item">{{ item }}</span> {{{ done }}}
-    </li>
+	<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()
+
 ```javaScript
 $.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.
+
 ```javaScript
 $.scope.toDo.push({
     item: 'Collect underwear',
@@ -41,39 +52,74 @@ $.scope.toDo.push({
     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.
+
+- `$.scope.toDo.push([object])`
+  - **Description**: The method will just insert object with the relevent key and value pair as used in your template.
+  - **Parameter**:
+    - **Type: object**: Object with key and value in the HTML template.
+- `$.scope.toDo.pop()`
+  - **Description**: The method will remove and return the last element in the repeat array.
+- `$.scope.toDo.reverse()`
+  - **Description**: The method will reverse the repeat array and append the array.
+- `$.scope.toDo.remove([key] || [index Id])`
+  - **Description**: The method would use either the key value of the pair to remove or use the index id to remove an array item.
+  - **Parameters**:
+    - **key**: The key of the array you wish to remove.
+    - **Index Id**: The array Id you wish to remove.
+- `$.scope.toDo.shift()`
+  - **Description**: The method works the same as regular arrays.
+- `$.scope.toDo.loop()`
+  - **Description**: The method takes the 0th item of an array and adds it as the last item of the array.
+- `$.scope.toDo.loopUp()`
+  - **Description**: The method does the opposite of loop(). 
+- `$.scope.toDo.indexOf()`
+  - **Description**:  The method will return the array index number of the matching element or array id. Mostly used for internals usage.
+    - **Parameters**:
+    - **key**: The key of the array you wish to get the id of.
+    - **Value**: The value of the key pair you wish to get the id of.
+- `$.scope.toDo.update([key] || [index Id] , [Object])`
+  - **Description**: The method would use either the key value of the pair to update or use the index id to update the object key value pair.
+  - **Parameters**:
+    - **key**: The key of the array you wish to update.
+    - **Index Id**: The array Id you wish to update.
+    - **Object**: The object you wish to update the array with.
+- `$.scope.toDo.splice()`
+  - **Description**: The method 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.
+  - **Parameters**:
+    - **Index**: The key of the array you wish to update or array id.
+    - **Amount**: TheNumber of repeat objects that will be removed. If there are non to be removed.
+    - **Object**: The object you wish to add to the array.
+- `$.scope.toDo.getByKey([key] || [index Id])`
+  - **Description**: The method would use either the key value of the pair to get or use the index id to get an array item.
+  - **Parameters**:
+    - **key**: The key of the array you wish to get.
+    - **Index Id**: The array Id you wish to get.
+- `$.scope.toDo.__setPut(function($el, item, list){ [logic of your code] })`
+  - **Description**: The method takes a callback function that will run when a element is being inserted. This must be a function and must include `$el.show()`, or some other way of un-hiding `$el`.
+  - **Parameters**:
+    - **$el**: refers to the DOM element or relevent HTML tag.
+    - **item**: refers to the each of the array key pair.
+    - **list**: refers to the jq-repeat attribute object array.
+- `$.scope.toDo.__setTake(function($el, item, list){ [logic of your code] })`
+  - **Description**: The method takes a callback function that will run when a element is being remove. This must be a function and must include `$el.show()`, or some other way of un-hiding `$el`.
+  - **Parameters**:
+    - **$el**: refers to the DOM element or relevent HTML tag.
+    - **item**: refers to the each of the array key pair.
+    - **list**: refers to the jq-repeat attribute object array.
+- `$.scope.toDo.__setUpdate(function($el, item, list){ [logic of your code] })`
+  - **Description**: The method takes a callback function that will run when a element is being updated. This must be a function and must include `$el.show()`, or some other way of un-hiding `$el`.
+  - **Parameters**:
+    - **$el**: refers to the DOM element or relevent HTML tag.
+    - **item**: refers to the each of the array key pair.
+    - **list**: refers to the jq-repeat attribute object array.
 
 ## Credits
-* Written by [William Mantly](https://github.com/wmantly)
-* Big thanks to [Derek Hu](https://github.com/derek-dchu) for creating NPM and bower package, and other general house keeping.
-* Also, thanks to [Raja Kapur](https://github.com/aonic) for advice and guidance.
+- Written by [William Mantly](https://github.com/wmantly)
+- Big thanks to [Derek Hu](https://github.com/derek-dchu) for creating NPM and bower package, and other general house keeping.
+- Thanks to [Ti Seng Lim](https://github.com/Newtbot) for updating the readme documentation and adding examples.
+- Also, thanks to [Raja Kapur](https://github.com/aonic) for advice and guidance.
+
+
+

example/getByKey.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- need to load jq-query cdn or file. -->
+<script src="https://code.jquery.com/jquery-3.7.1.min.js"
+    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+
+<!-- need to load mustache cdn or file. -->
+<script src="
+https://cdn.jsdelivr.net/npm/mustache@4.2.0/mustache.min.js
+"></script>
+
+<!-- need to load jq-repeat cdn or file -->
+<script src="https://718it.codeland.us/static/lib/js/jq-repeat_new.js"></script>
+<script>
+    //on document ready. the logic would execute.
+    $(document).ready(function () {
+        $.scope.toDo.push({ item: "Get milk",  done: "Yes" });
+        $.scope.toDo.push({ item: "Do laundry", done: "No" });
+        //either array Id or object key works.
+        console.log($.scope.toDo.getByKey(0))
+        console.log($.scope.toDo.getByKey("Get milk"))
+
+    });
+
+
+</script>
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+</head>
+
+<body>
+    <ul>
+        <!-- Simply add a `jq-repeat` attribute with a unique value for the reference name for that template, in this case `toDo`.  -->
+        <!-- jq-repeat-index is set which 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. -->
+        <li jq-repeat="toDo" jq-repeat-index="item"><span class="item">{{ item }}</span>: {{ done }}</li> 
+    </ul>
+</body>
+
+</html>
+
+

example/indexOf.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- need to load jq-query cdn or file. -->
+<script src="https://code.jquery.com/jquery-3.7.1.min.js"
+    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+
+<!-- need to load mustache cdn or file. -->
+<script src="
+https://cdn.jsdelivr.net/npm/mustache@4.2.0/mustache.min.js
+"></script>
+
+<!-- need to load jq-repeat cdn or file -->
+<script src="https://718it.codeland.us/static/lib/js/jq-repeat_new.js"></script>
+<script>
+    //on document ready. the logic would execute.
+    $(document).ready(function () {
+        $.scope.toDo.push({ item: "Get milk",  done: "Yes" });
+        $.scope.toDo.push({ item: "Do laundry", done: "No" });
+        console.log($.scope.toDo.indexOf("Get milk"))
+        console.log($.scope.toDo.indexOf("Yes"))
+
+    });
+
+
+</script>
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+</head>
+
+<body>
+    <ul>
+        <!-- Simply add a `jq-repeat` attribute with a unique value for the reference name for that template, in this case `toDo`.  -->
+        <!-- jq-repeat-index is set which 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. -->
+        <li jq-repeat="toDo" jq-repeat-index="item"><span class="item">{{ item }}</span>: {{ done }}</li> 
+    </ul>
+</body>
+
+</html>
+
+

example/insert.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- need to load jq-query cdn or file. -->
+<script src="https://code.jquery.com/jquery-3.7.1.min.js"
+    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+
+<!-- need to load mustache cdn or file. -->
+<script src="
+https://cdn.jsdelivr.net/npm/mustache@4.2.0/mustache.min.js
+"></script>
+
+<!-- need to load jq-repeat cdn or file -->
+<script src="https://718it.codeland.us/static/lib/js/jq-repeat_new.js"></script>
+<script>
+    //on document ready. the logic would execute.
+    $(document).ready(function () {
+        $.scope.toDo.push({ item: "Get milk", done: "Yes" });
+    });
+</script>
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+</head>
+
+<body>
+    <ul>
+        <!-- Simply add a `jq-repeat` attribute with a unique value for the reference name for that template, in this case `toDo`.  -->
+        <li jq-repeat="toDo"><span class="item">{{ item }}</span>: {{ done }}</li>
+    </ul>
+</body>
+
+</html>

example/loop.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- need to load jq-query cdn or file. -->
+<script src="https://code.jquery.com/jquery-3.7.1.min.js"
+    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+
+<!-- need to load mustache cdn or file. -->
+<script src="
+https://cdn.jsdelivr.net/npm/mustache@4.2.0/mustache.min.js
+"></script>
+
+<!-- need to load jq-repeat cdn or file -->
+<script src="https://718it.codeland.us/static/lib/js/jq-repeat_new.js"></script>
+<script>
+    //on document ready. the logic would execute.
+    $(document).ready(function () {
+        $.scope.toDo.push({ item: "Get milk",  done: "Yes" });
+        $.scope.toDo.push({ item: "Do laundry", done: "No" });
+        $.scope.toDo.push({ item: "Hang your clothes", done: "No" });
+        $.scope.toDo.push({ item: "Cook Dinner", done: "No" });
+        $.scope.toDo.loop() 
+    });
+
+
+</script>
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+</head>
+
+<body>
+    <ul>
+        <!-- Simply add a `jq-repeat` attribute with a unique value for the reference name for that template, in this case `toDo`.  -->
+        <li jq-repeat="toDo"><span class="item">{{ item }}</span>: {{ done }}</li> 
+    </ul>
+</body>
+
+</html>
+
+

example/loopUp.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- need to load jq-query cdn or file. -->
+<script src="https://code.jquery.com/jquery-3.7.1.min.js"
+    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+
+<!-- need to load mustache cdn or file. -->
+<script src="
+https://cdn.jsdelivr.net/npm/mustache@4.2.0/mustache.min.js
+"></script>
+
+<!-- need to load jq-repeat cdn or file -->
+<script src="https://718it.codeland.us/static/lib/js/jq-repeat_new.js"></script>
+<script>
+    //on document ready. the logic would execute.
+    $(document).ready(function () {
+        $.scope.toDo.push({ item: "Get milk",  done: "Yes" });
+        $.scope.toDo.push({ item: "Do laundry", done: "No" });
+        $.scope.toDo.push({ item: "Hang your clothes", done: "No" });
+        $.scope.toDo.push({ item: "Cook Dinner", done: "No" });
+        $.scope.toDo.loopUp() 
+    });
+
+
+</script>
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+</head>
+
+<body>
+    <ul>
+        <!-- Simply add a `jq-repeat` attribute with a unique value for the reference name for that template, in this case `toDo`.  -->
+        <li jq-repeat="toDo"><span class="item">{{ item }}</span>: {{ done }}</li> 
+    </ul>
+</body>
+
+</html>
+
+