I manage to get the Pull-to-Refresh working from the code in your 'Kitchen Sink' demo files. However it just keeps running the loading graphic. It doesn't refresh the page or terminate. Just goes on reloading forever.

So I assume that it is not actually refreshing the page. The pull seems to just activate the spinner. How do I set the pull to refresh the data and then terminate the spinner?

Hello Brad,
Pull to refresh option integrated in the Framework 7 requires some events to be attached to it in order to reload the data-bindings data and then, when the data is loaded to remove the preloader.
I will try to setup a quick step-bys-step guide how to achieve that and will send it to you.

So this is how to achieve this:

1. First you need to change your default .page-content div so it becomes:

<div class="page-content pull-to-refresh-content" data-ptr-distance="55">

Where the data-ptr-distance="55" is an additional attribute that allows to set custom pull to refresh trigger distance. By default (if not specified) it is 44px.

2. Add the following code just after the .page-content opening div:

<div class="pull-to-refresh-layer">
      <div class="preloader"></div>
      <div class="pull-to-refresh-arrow"></div>
    </div>

3. In order to get the code, that refreshes the Data Binding, as well as to place the required code on your app page do the following:
- In code view add some dummy anchor tag anywhere on the page: <a>dummy anchor</a>
- Click the dummy anchor and select Behaviors > Add New > DMXzone > Control HTML5 Data Bindings
- Select Action - Refresh Data and select your data source, then click OK
- This adds an onclick event in the anchor tag with some action inside and some code in the head tags of your page. Cut the action that is placed in the onclick event. It should be something like:

dmxDataBindingsAction('refresh','dataSourceName',{})

4. Open the my-app.js located in the Framework7 > js fodler of your site definition folder.
- Paste the following code, just after the myApp.init(); (line 13):

var ptrContent = $$('.pull-to-refresh-content');
ptrContent.on('refresh', function (e) {
	dmxDataBindingsAction('refresh','dataSourceName',{}) // THIS IS THE ACTION THAT YOU'VE JUST CUT FROM THE ONCLICK EVENT
});

- Save the my-app.js file

5. Go back to your app page and open the data bindings UI
- Open the data bindings Behaviors
- Select the update Event
- Select Add custom code
- Enter this: myApp.pullToRefreshDone() and click OK

You are done.

Much appreciated! I was so close, step 4 was where I was stuck. I'll give this a try this evening.

I am stuck on number 5 ..... What update event?

Here it is: prntscr.com/83f1jh

That worked, thank you.

However you must be using a newer version that is not released yet as your screenshot looks nothing like what I have.

Not sure what exactly do you mean by: " your screenshot looks nothing like what I have."
The UI of the extension has not been changed since months

Today's update of Data Bindings brought the UI to same as yours. Thanks ;-)

Loving this extension. Would love to see more tutorials on some of the other app specific features such as adding a home screen and app icons. Still can't get that to work no matter what I do. Same with preloader.