Ok here is the answer to my own question and a couple of observations and fixes.
Firstly when using the sample block of code within my custom xml component file I neglected to add the field name within my custom database table.
So for example: list_templates from the xml example
Needs to go into the MYSQL database within my component table like so:
column name: list_templates
column type: TEXT
Basically because its JSON data and it fits best inside a TEXT type column.
Next...
There was the bug where when closing teh Modal and then re-opening it would duplicate the content you add.
To fix this I found the repeatable.js file located within media/system/js and made a backup copy of it. I then pasted the uncomplressed version into repeatable js and found that by changing this line:
30 // Set original content for cancel
31 origContent = getTrs().clone();
to this
30 // Set original content for cancel
31 origContent = getTrs();
That it actually fixes the duplication bug. I have done several tests to see if its doing the right thing and it actually is. No data loss is occurring and no data is being duplicated anymore. You can open and close the modal box as many times as you like and it will only ever show you the selections you saved.
I have tried this by closing the view file and reopening the data as well and several other methods all of which are working.
And lastly!
Because I wanted to echo the contents of the JSON within my view as a table below the select button I also added a couple of things to repetable/js to allow me to be able to save and apply after clicking the save button within the modal.
This means that when I click save on trghe repeatable fields modal the page saves and applies allowing me to collect the data directly from teh table column field to display on the page.
I achieved this by adding the following couple of things.
A function to get the view=componentnameview from the url
// get the url values function
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(m,key,value) {
vars[key] = value;
});
return vars;
}
and then setting a varibale for view like so
var componentName = getUrlVars()["view"];
and then after line 341
I added this
Joomla.submitbutton(''+componentName+'.apply');
Now the modal Save button does its thing and then joomla saves the item and knows which component view its saving it to and stays on the page. This allows me to collect the table data but also saves the content within the repeatable fields modal in-case the user thought they were saving it and accidentally clicked close on the default button group of the item.
I hope I can help someone out with my answer/post. If its not appropriate to put all this in just let me know and i'll move it elsewhere.
--