Developing Concepts on Data-Binding 📝

{{ DSD | default }}

Sorting?

Arbitrary mix of static and dynamic

List binding

Object binding

Element type support

To test;

• Numbers

• Dates

• Radio buttons

Modes

• All text content

• Attributes e.g. for URL links

Future

• How to bind in-text links

• How to set defaults

• Cascading binds, first match preference, e.g. query then localstorage, then cookie... |

  • Or wfu-bind, then wfu-bind-2, etc.

• Bind, then apply custom attributes like x-value -> {{ }}

• Sk-loaders

• Saving values from a form

  • Outward binding

• May not work alongside FS Powerful Rich Text due to {{ }} constructions

• Handlebars logic

• Conditional vis

• Binding to tables

• Date-formatting and numeric formatting

Compact DSD references

++

.. .

assumed 3 parts

best practices when binding things in a collection list => set context on item

can override on sub-items

on a collection-page can st on body if you like

But {}

..

wfu-bind=+id

element, and binding find nearest parent for context

Ways to Use your Data

Besides data-binding, you can use this data in other ways.

Collection List Item Count

Want to display the number of items in a collection?

1. Setup that collection as a data source using the instructions above. In this example, we’ll give the data source a wfu-data id of blogposts. Any unique datasource name will work (see above).

2. Create an element on your page where you want to display the count. In this example, we’ll give it an ID of myCounter

3. Paste the following code into your page’s Before </body> tag section.

<script type="module">
import { loadAllDataSources } from 'https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/src/datasources/webflow-collectionlist-data.min.js';
$(function () {

    // Create database
    var db = loadAllDataSources();

    // Count items
    $("#myCounter").text(db.data.get("blogposts").length);
});
</script>