# 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 <a href="#ways-to-use-your-data" id="ways-to-use-your-data"></a>

Besides [data-binding](https://wfu.sygnal.com/docs/datasources/datasource/databinding), you can use this data in other ways.

#### Collection List Item Count <a href="#collection-list-item-count" id="collection-list-item-count"></a>

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.

{% code overflow="wrap" %}

```html
<script type="module">
import { loadAllDataSources } from 'https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@4.11/src/datasources/webflow-collectionlist-data.min.js';
$(function () {

    // Create database
    var db = loadAllDataSources();

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

{% endcode %}

### &#x20;<a href="#how-it-works" id="how-it-works"></a>

<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://attr.sygnal.com/sa5-data/binding-data/developing-concepts-on-data-binding.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.