HTML5 Data Bindings Support Product Page

Solved

How does HTML5 Data Bindings work?

Reported 05 Sep 2014 14:16:47
1
has this problem
05 Sep 2014 14:16:47 Adam Lavery posted:
I've been using DW for many years but have recently started using DMXZ extensions to hopefully simplify a new project development. In particular HTML5 Data Bindings.

The problem is I don't get how it works! The "manual" is little more than a random collection of things you can do with it, none of which helps to give a basic understanding of the architecture behind Data Bindings. None I have looked at have shown what is actually happening i.e. the code being generated and why. There's loads of showcases, but none have any demo code or tutorials to show how they've been put together. Nothing I can find explains the basic concepts e.g. what exactly is a repeat region? Why repeat children?

Is there something hidden away somewhere?

So I'm trying to do something really simple:

Database table with 3 fields: id, text, link.
Use that table to build an unordered list of the text and links i.e.

<div><ul><li><a href="{{link}}">{{text}}</a></li></ul></div>

So I want the <li>s to repeat for each entry in the table. I've got the Data Source connected and working ok (test pulls out my records). I create a Repeat Region but where does it go? The only place it will apparently "attach" is to the div not the LI elements which are the things that need to repeat. Or should it attach to the UL and then Repeat Children? If so, how to attach to the UL when trying to insert attaches to the DIV and removes the UL, LI and A tags!

If I can get over this initial hurdle then maybe I can figure out the rest of it. Better would be a proper manual with a proper BASICS section that gives a reasonable overview of the architecture behind this, instead of a single example on how to do one specific thing!

Replies

Replied 05 Sep 2014 14:52:47
05 Sep 2014 14:52:47 Adam Lavery replied:
Partially answering my own question. I looked at the Using Repeat Children Region, not because I know what a Repeat Children Region is and that I needed to use one, but just a guess that this might be what's needed.

Turns out correct - although the video doesn't match how it works now so a bit more guesswork needed on what we're supposed to do. Finally, a result - a repeating set of LIs with text and links from the DB!

At least in Chrome & FF. It's not working in IE11 - doesn't repeat and just shows the place-holder/template text. Nor in DW live view - nothing at all shows in there. Does this extension work in IE?

Chrome also flags an error getting jquery-1.10.2.min.map but the only reference to this I can find in my project is commented out entries in bootstrap\js\jquery.js and ScriptLibrary\jquery-latest-.pack.js.

Hopefully there is a proper, up-to-date manual somewhere!
Replied 05 Sep 2014 15:17:02
05 Sep 2014 15:17:02 Teodor Kuduschiev replied:
Hello Adam,
It is described how to use the repeat/repeat children regions in the manual/video tutorials.
As the "repeat children" name hints, it repeats the child elements inside a parent>child structure like, ul>li or div>child div ... etc.
In order to select properly an element that you need to apply html5 data bidnings to, please make sure to select it in the property inspector in Design View:

Then the proper element will appear in the Bind To: menu.

As for the browser issues you are having - please provide a link where we can check this. The extension supports all of the modern browsers, so there mu st be something that you did wrong.
Replied 08 Sep 2014 09:52:08
08 Sep 2014 09:52:08 Adam Lavery replied:
Thanks Treodor, yes got it figured now, but I still believe this extension would benefit from an overview that introduces the key terms and how it all hangs together. Guess we'll have to agree to disagree on that!

As for the browsers, thanks for your assistance. For anyone else:

IE: the issue was compatibility mode - the test site is on a local machine and I had set the flag to display all intranet sites in compatibility mode (due to issues M$ created with things like OWA with IE11!). Ensure site is not in compatibility mode.

DW Live: need to ensure live view is Using Testing Server for Document Source.

Reply to this topic