bind() now accepts compound.paths

stephband · Dec 17, 2023 · 922d4f3 · 922d4f3
1 parent 60b8edb
commit 922d4f3
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/modules/scope/bind-value.js b/modules/scope/bind-value.js
@@ -1,6 +1,6 @@
 
 import id     from '../../../fn/modules/id.js';
-import set    from '../../../fn/modules/set.js';
+import set    from '../../../fn/modules/set-path.js';
 import events from '../../../dom/modules/events.js';
 import { getValue, setValue } from '../renderer/value.js';
 import { observe } from '../data.js';
@@ -14,7 +14,7 @@ function getTargetValue(e) {
 export default function bindValue(element, data, path, to, from, setValue) {
     if (window.DEBUG && !warned) {
         warned = true;
-        console.warn('Literal: you are using the template function bind(). This is experimental and the API may change. Currently only single key paths are supported, not compound.paths.');
+        console.warn('Literal: you are using the experimental template function bind(). Not recommended for use on many inputs, prefer delegation for that.');
     }
 
     const inputs = events('input', element)

diff --git a/test/test.html b/test/test.html
@@ -77,7 +77,7 @@ <h3 class="text-03">bind()</h3>
             <label>text</label>
             <input type="text" value="${ bind('string', data) }" />
             <label>number</label>
-            <input type="number" value="${ bind('number', data) }" />
+            <input type="number" value="${ bind('object.number', data) }" />
         </template>
 
         <br/>
@@ -86,21 +86,21 @@ <h3 class="text-03">bind()</h3>
             <label>text</label>
             <input type="text" value="${ bind('string', data) }" />
             <label>number</label>
-            <input type="number" value="${ bind('number', data) }" />
+            <input type="number" value="${ bind('object.number', data) }" />
         </template>
     </section>
 
-    <!--section>
+    <section>
         <h3 class="text-03">&lt;textarea&gt;</h3>
 
         <template id="textarea">
-            <textarea name="property">${ data.property }</textarea>
+            <textarea name="string">${ data.string }</textarea>
             ${ events('change', element).each((e) => set(e.target.name, data, e.target.value)) }
         </template>
 
         <template is="literal-html" src="./test.json">
-            ${ data.object }
             ${ include('#textarea', data.object) }
+            ${ data.object }
         </template>
     </section>
 
@@ -265,7 +265,7 @@ <h3 class="text-03">Live binding <span class="test-count">(4 tests)</span></h3>
                 <option value="${ 9 }">Nine</option>
             </select>
         </template>
-    </section-->
+    </section>
 
     <hr/>
 

diff --git a/test/test.json b/test/test.json
@@ -2,10 +2,13 @@
     "one":       "✔ One",
     "two":       2,
     "three":     [3],
-    "string":    "String",
+    "string":    "string",
     "number":    1,
     "array":     [0,1,2,3],
-    "object":    { "property": "value" },
+    "object":    {
+        "number":   1,
+        "string":   "string"
+    },
     "null":      null,
 
     "things": [{