@webqit/oohtml 2.1.65 → 2.1.67
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -22
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -116,7 +116,7 @@ function changeCallback(changes) {
|
|
|
116
116
|
}
|
|
117
117
|
```
|
|
118
118
|
|
|
119
|
-
|
|
119
|
+
</details>
|
|
120
120
|
|
|
121
121
|
### Scoping
|
|
122
122
|
|
|
@@ -570,13 +570,13 @@ console.log(localOrGlobalImport2); // { value: div }
|
|
|
570
570
|
|
|
571
571
|
## Data Binding
|
|
572
572
|
|
|
573
|
-
Data binding is the concept of
|
|
573
|
+
Data binding is the concept of having a mechanism that declaratively drives the UI from application data, ensuring that the relevant parts of the UI are *automatically* updated as application state changes.
|
|
574
574
|
|
|
575
575
|
OOHTML makes this possible in just simple conventions - via a new comment-based data-binding syntax `<?{ }?>` and a complementary new `binding` attribute!
|
|
576
576
|
|
|
577
577
|
### Comment-Based Data-Binding
|
|
578
578
|
|
|
579
|
-
|
|
579
|
+
Here, we get a comment-based data-binding syntax `<?{ }?>` which works like regular comment but stay "data-charged":
|
|
580
580
|
|
|
581
581
|
```js
|
|
582
582
|
<html>
|
|
@@ -610,31 +610,31 @@ Now that extra bit of information gets decoded and original relationships are fo
|
|
|
610
610
|
|
|
611
611
|
### Directives-Based Data-Binding
|
|
612
612
|
|
|
613
|
-
|
|
613
|
+
Here, we get the `binding` attribute for a declarative and neat, key/value data-binding syntax:
|
|
614
614
|
|
|
615
615
|
```html
|
|
616
616
|
<div binding="<type><parameter>: <argument>;"></div>
|
|
617
617
|
```
|
|
618
618
|
|
|
619
|
-
*where*:
|
|
619
|
+
**-->** *where*:
|
|
620
620
|
|
|
621
621
|
+ *`<type>` is the binding type, which is always a symbol*
|
|
622
622
|
+ *`<directive>` is the binding directive, which could be any of CSS property, class name, attribute name, Structural Directive*
|
|
623
623
|
+ *`<argument>` is the bound value or expression*
|
|
624
624
|
|
|
625
|
-
*which would give us the following for a CSS property*:
|
|
625
|
+
**-->** *which would give us the following for a CSS property*:
|
|
626
626
|
|
|
627
627
|
```html
|
|
628
628
|
<div binding="&color: someColor; &backgroundColor: 'red'"></div>
|
|
629
629
|
```
|
|
630
630
|
|
|
631
|
-
*with enough liberty to separate the binding type from the directive itself*:
|
|
631
|
+
**-->** *with enough liberty to separate the binding type from the directive itself*:
|
|
632
632
|
|
|
633
633
|
```html
|
|
634
634
|
<div binding="& color: someColor; & backgroundColor: 'red'"></div>
|
|
635
635
|
```
|
|
636
636
|
|
|
637
|
-
*
|
|
637
|
+
**-->** *the rest of which can be seen below*:
|
|
638
638
|
|
|
639
639
|
| Symbol | Meaning | Usage |
|
|
640
640
|
| :---- | :---- | :---- |
|
|
@@ -643,8 +643,6 @@ The `binding` attribute for a declarative and neat, key/value data-binding synta
|
|
|
643
643
|
| `~` | Attribute Name | `<a binding="~href: person.profileUrl + '#bio';"></a>` |
|
|
644
644
|
| `@` | Structural Directive: | *See next table* |
|
|
645
645
|
|
|
646
|
-
<details><summary>Structural Directives</summary>
|
|
647
|
-
|
|
648
646
|
| Directive | Meaning | Usage |
|
|
649
647
|
| :---- | :---- | :---- |
|
|
650
648
|
| `@text` | For rendering plain text content | `<span binding="@text: firstName + ' ' + lastName;"></span>` |
|
|
@@ -671,6 +669,16 @@ The `binding` attribute for a declarative and neat, key/value data-binding synta
|
|
|
671
669
|
|
|
672
670
|
</details>
|
|
673
671
|
|
|
672
|
+
<details><summary>All in Realtime</summary>
|
|
673
|
+
|
|
674
|
+
Lists are rendered in realtime, which means that in-place mutations - additions and removals - on the *iteratee* will be automatically reflected on the UI!
|
|
675
|
+
|
|
676
|
+
</details>
|
|
677
|
+
|
|
678
|
+
<details><summary>With SSR Support</summary>
|
|
679
|
+
|
|
680
|
+
Generated item elements are automatically assigned a corresponding index with a `data-index` attribute! This helps in remapping generated item nodes to their respective entry in *iteratee* - universally.
|
|
681
|
+
|
|
674
682
|
</details>
|
|
675
683
|
|
|
676
684
|
<details><summary>Example</summary>
|
|
@@ -691,18 +699,6 @@ The `binding` attribute for a declarative and neat, key/value data-binding synta
|
|
|
691
699
|
|
|
692
700
|
</details>
|
|
693
701
|
|
|
694
|
-
<details><summary>All in Realtime</summary>
|
|
695
|
-
|
|
696
|
-
Lists are rendered in realtime, which means that in-place mutations - additions and removals - on the *iteratee* will be automatically reflected on the UI!
|
|
697
|
-
|
|
698
|
-
</details>
|
|
699
|
-
|
|
700
|
-
<details><summary>With SSR Support</summary>
|
|
701
|
-
|
|
702
|
-
Generated item elements are automatically assigned a corresponding index with a `data-index` attribute! This helps in remapping generated item nodes to their respective entry in *iteratee* - universally.
|
|
703
|
-
|
|
704
|
-
</details>
|
|
705
|
-
|
|
706
702
|
## Data Plumbing
|
|
707
703
|
|
|
708
704
|
*[TODO]: The Context API and Bindings API*
|