support scripts in event bindings

Author: jogibear9988

sample/index.html

@@ -70,8 +70,7 @@ <h1>Hello World</h1>
             <h1>Hello World</h1>
             <div>[[this.ctx]]</div>
             <template repeat:myitem="[[this.list]]">
-                <button @click="{{this.ctx = myitem}}"
-                    $aaaonclick="[['this.getRootNode().host.ctx = \'' + myitem + '\'']]">[[myitem]] - [[index]]</button>
+                <button @click="{{this.ctx = myitem}}">[[myitem]] - [[index]]</button>
             </template>
         </template>
     </node-projects-dce>

src/BaseCustomWebComponent.ts

@@ -232,29 +232,37 @@ export class BaseCustomWebComponentNoAttachedTemplate extends HTMLElement {
                             b(true, false);
                         }
                     } else if (a.value[0] === '{' && a.value[1] === '{' && a.value[a.value.length - 1] === '}' && a.value[a.value.length - 2] === '}') {
-                        const attributeValues = a.value.substring(2, a.value.length - 2).split('::');
-                        let nm = a.name;
-                        if (nm[0] == '.')
-                            nm = nm.substring(1);
-                        let value = attributeValues[0];
-                        let event = (node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement) ? 'input' : (node instanceof HTMLSelectElement ? 'change' : nm + '-changed');
-                        if (attributeValues.length > 1 && attributeValues[1])
-                            event = attributeValues[1];
-                        const camelCased = nm.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-                        let noNull = false;
-                        if (value[0] === '?') {
-                            value = value.substring(1);
-                            noNull = true;
-                        }
-                        const b = (firstRun?: boolean, onlyWhenChanged?: boolean) => this._bindingSetNodeValue(firstRun, node, a, camelCased, value, repeatBindingItems, removeAttributes, host, context, noNull, onlyWhenChanged);
-                        this._bindings.push([b, null]);
-                        b(true, false);
-                        if (event) {
-                            for (let x of event.split(';')) {
-                                if (node[x] instanceof TypedEvent)
-                                    (<TypedEvent<void>>node[x]).on((e) => this._bindingsSetValue(host ?? this, value.replaceAll('?', ''), (<HTMLInputElement>node)[camelCased], context, repeatBindingItems));
-                                else
-                                    node.addEventListener(x, (e) => this._bindingsSetValue(host ?? this, value.replaceAll('?', ''), (<HTMLInputElement>node)[camelCased], context, repeatBindingItems));
+                        if (a.name[0] === '@') {
+                            const event = a.name.substring(1);
+                            if (node[event] instanceof TypedEvent)
+                                (<TypedEvent<void>>node[event]).on((e) => this._bindingRunEvalInt(a.value.substring(2, a.value.length - 2), repeatBindingItems, <any>e, context));
+                            else
+                                node.addEventListener(event, (e) => this._bindingRunEvalInt(a.value.substring(2, a.value.length - 2), repeatBindingItems, e, context));
+                        } else {
+                            const attributeValues = a.value.substring(2, a.value.length - 2).split('::');
+                            let nm = a.name;
+                            if (nm[0] == '.')
+                                nm = nm.substring(1);
+                            let value = attributeValues[0];
+                            let event = (node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement) ? 'input' : (node instanceof HTMLSelectElement ? 'change' : nm + '-changed');
+                            if (attributeValues.length > 1 && attributeValues[1])
+                                event = attributeValues[1];
+                            const camelCased = nm.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+                            let noNull = false;
+                            if (value[0] === '?') {
+                                value = value.substring(1);
+                                noNull = true;
+                            }
+                            const b = (firstRun?: boolean, onlyWhenChanged?: boolean) => this._bindingSetNodeValue(firstRun, node, a, camelCased, value, repeatBindingItems, removeAttributes, host, context, noNull, onlyWhenChanged);
+                            this._bindings.push([b, null]);
+                            b(true, false);
+                            if (event) {
+                                for (let x of event.split(';')) {
+                                    if (node[x] instanceof TypedEvent)
+                                        (<TypedEvent<void>>node[x]).on((e) => this._bindingsSetValue(host ?? this, value.replaceAll('?', ''), (<HTMLInputElement>node)[camelCased], context, repeatBindingItems));
+                                    else
+                                        node.addEventListener(x, (e) => this._bindingsSetValue(host ?? this, value.replaceAll('?', ''), (<HTMLInputElement>node)[camelCased], context, repeatBindingItems));
+                                }
                             }
                         }
                     }

src/DeclaritiveBaseCustomWebcomponent.ts

@@ -152,19 +152,20 @@ class DeclaritiveBaseCustomWebcomponent extends BaseCustomWebComponentNoAttached
 customElements.define("node-projects-dce", DeclaritiveBaseCustomWebcomponent);
 
 /*
-<node-projects-dce name="simple-dce-demo" properties='{"list":"Array", "list2":"Array"}' enable-bindings >
+<node-projects-dce name="simple-dce-demo" properties='{"list":"Array", "list2":"Array", "ctx":{"type":"String","reflect":true}}' enable-bindings >
     <template>
         <style>h1 {color: red}</style>
         <h1>Hello World</h1>
+        <div style="border: solid 3px black">Ctx: [[this.ctx]]</div>
         <template repeat:myitem="[[this.list]]">
             <button>[[myitem.toUpperCase()]] - <b>[[myitem.toLowerCase()]]</b> - [[index]]</button>
             <ul>
             <template repeat:myitem2="[[this.list2]]" repeat-index="inneridx">
-                <button>[[myitem.toUpperCase()]] - <b>[[myitem2.toLowerCase()]]</b> - [[inneridx * 100]]</button>
+                <button @click="{{this.ctx = myItem2}}" >[[myitem.toUpperCase()]] - <b>[[myitem2.toLowerCase()]]</b> - [[inneridx * 100]]</button>
             </template>
             </ul>
         </template>
     </template>
 </node-projects-dce>
-<simple-dce-demo list='["aa","bb","cc"]' list2='["hello", "you"]' style="position:absolute;left:184px;top:-53px;"></simple-dce-demo>
+<simple-dce-demo list='["aa","bb","cc"]' list2='["hello", "you"]' ctx="TestCtx" style="position:absolute;left:184px;top:-53px;"></simple-dce-demo>
 */