configuration to start with an empty repeater list

README.md

@@ -48,14 +48,19 @@ Names get reindexed if an item is added or deleted.
 <script src="path/to/jquery.js"></script>
 <script src="path/to/jquery.repeater/jquery.repeater.js"></script>
 <script>
-	$(document).ready(function () {
-		$('.repeater').repeater({
-			// (Optional)
-			// "defaultValues" sets the values of added items.  The keys of
+    $(document).ready(function () {
+        $('.repeater').repeater({
+            // (Optional)
+            // start with an empty list of repeaters. Set your first (and only)
+            // "data-repeater-item" with style="display:none;" and pass the
+            // following configuration flag
+            initEmpty: true,
+            // (Optional)
+            // "defaultValues" sets the values of added items.  The keys of
             // defaultValues refer to the value of the input's name attribute.
             // If a default value is not specified for an input, then it will
             // have its value cleared.
-			defaultValues: {
+            defaultValues: {
                 'text-input': 'foo'
             },
             // (Optional)
@@ -88,8 +93,8 @@ Names get reindexed if an item is added or deleted.
             // Removes the delete button from the first list item,
             // defaults to false.
             isFirstItemUndeletable: true
-		})
-	});
+        })
+    });
 </script>
 ```
 
@@ -122,20 +127,20 @@ Names get reindexed if an item is added or deleted.
 <script src="path/to/jquery.js"></script>
 <script src="path/to/jquery.repeater/jquery.repeater.js"></script>
 <script>
-	$(document).ready(function () {
-		$('.repeater').repeater({
-			// (Required if there is a nested repeater)
+    $(document).ready(function () {
+        $('.repeater').repeater({
+            // (Required if there is a nested repeater)
             // Specify the configuration of the nested repeaters.
             // Nested configuration follows the same format as the base configuration,
             // supporting options "defaultValues", "show", "hide", etc.
             // Nested repeaters additionally require a "selector" field.
-			repeaters: [{
+            repeaters: [{
                 // (Required)
                 // Specify the jQuery selector for this nested repeater
                 selector: '.inner-repeater'
             }]
-		});
-	});
+        });
+    });
 </script>
 ```
 

index.html

@@ -79,7 +79,6 @@ <h2>Nested</h2>
         <div data-repeater-item>
           <input type="text" name="text-input" value="A"/>
           <input data-repeater-delete type="button" value="Delete"/>
-
           <div class="inner-repeater">
             <div data-repeater-list="inner-group">
               <div data-repeater-item>
@@ -89,7 +88,6 @@ <h2>Nested</h2>
             </div>
             <input data-repeater-create type="button" value="Add"/>
           </div>
-
         </div>
       </div>
       <input data-repeater-create type="button" value="Add"/>

jquery.repeater.js

@@ -1,6 +1,6 @@
-// jquery.repeater version 1.1.4
+// jquery.repeater version 1.1.5
 // https://github.com/DubFriend/jquery.repeater
-// (MIT) 01-10-2016
+// (MIT) 03-10-2016
 // Brian Detering <[email protected]> (http://www.briandetering.net/)
 (function ($) {
 'use strict';
@@ -827,6 +827,10 @@ $.fn.repeater = function (fig) {
         var $itemTemplate = $list.find('[data-repeater-item]')
                                  .first().clone().hide();
 
+        // if(fig.initEmpty) {
+        //     $itemTemplate.css('display', '');
+        // }
+
         var $firstDeleteButton = $(this).find('[data-repeater-item]').first()
                                         .find('[data-repeater-delete]');
 
@@ -902,6 +906,9 @@ $.fn.repeater = function (fig) {
 
         setIndexes($items(), getGroupName(), fig.repeaters);
         initNested($items());
+        if(fig.initEmpty) {
+            $items().remove();
+        }
 
         if(fig.ready) {
             fig.ready(function () {

nested-repeater.html

@@ -3,7 +3,6 @@
     <div data-repeater-item>
       <input type="text" name="text-input" value="A"/>
       <input data-repeater-delete type="button" value="Delete"/>
-
       <div class="inner-repeater">
         <div data-repeater-list="inner-group">
           <div data-repeater-item>
@@ -13,7 +12,6 @@
         </div>
         <input data-repeater-create type="button" value="Add"/>
       </div>
-
     </div>
   </div>
   <input data-repeater-create type="button" value="Add"/>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery.repeater",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "repeatable form input interface",
   "main": "jquery.repeater.js",
   "directories": {

repeater.jquery.json

@@ -1,6 +1,6 @@
 {
     "name": "repeater",
-    "version": "1.1.4",
+    "version": "1.1.5",
     "title": "Repeater",
     "author": {
         "name": "Brian Detering",

src/repeater.js

@@ -102,6 +102,10 @@ $.fn.repeater = function (fig) {
         var $itemTemplate = $list.find('[data-repeater-item]')
                                  .first().clone().hide();
 
+        // if(fig.initEmpty) {
+        //     $itemTemplate.css('display', '');
+        // }
+
         var $firstDeleteButton = $(this).find('[data-repeater-item]').first()
                                         .find('[data-repeater-delete]');
 
@@ -177,6 +181,9 @@ $.fn.repeater = function (fig) {
 
         setIndexes($items(), getGroupName(), fig.repeaters);
         initNested($items());
+        if(fig.initEmpty) {
+            $items().remove();
+        }
 
         if(fig.ready) {
             fig.ready(function () {

test/index.html

@@ -75,7 +75,6 @@
         <div data-repeater-item>
           <input type="text" name="text-input" value="A"/>
           <input data-repeater-delete type="button" value="Delete"/>
-
           <div class="inner-repeater">
             <div data-repeater-list="inner-group">
               <div data-repeater-item>
@@ -85,7 +84,6 @@
             </div>
             <input data-repeater-create type="button" value="Add"/>
           </div>
-
         </div>
       </div>
       <input data-repeater-create type="button" value="Add"/>

test/test.js

@@ -42,6 +42,38 @@ QUnit.test('add item', function (assert) {
     );
 });
 
+QUnit.test('instantiate with no first item', function (assert) {
+    this.$repeater.find('[data-repeater-item]').last().remove();
+    this.$repeater.find('[data-repeater-item]').css('display', 'none');
+    assert.strictEqual(
+        this.$repeater.find('[data-repeater-item]').css('display'), 'none',
+        'display:none css is set'
+    );
+    this.$repeater.repeater({ initEmpty: true });
+    assert.strictEqual(
+        this.$repeater.find('[data-repeater-item]').length, 0,
+        'starts with no items'
+    );
+    this.$addButton.click();
+    assert.strictEqual(
+        this.$repeater.find('[data-repeater-item]').length, 1,
+        'still able to create item'
+    );
+
+    assert.strictEqual(
+        this.$repeater.find('[data-repeater-item]').css('display'), 'block',
+        'display:none css is not set'
+    );
+
+    assert.deepEqual(
+        getNamedInputValues(this.$repeater.find('[data-repeater-item]')),
+        generateNameMappedInputValues('a', 0, '', {
+            "group-a[0][multiple-select-input][]": []
+        }),
+        'maintains template'
+    );
+});
+
 QUnit.test('instantiate group of repeaters with a single repeater() call', function (assert) {
     this.$fixture.find('.repeater').repeater();
     this.$addButton.click();