leanweb 1.2.2 → 1.2.5

package/README.md

@@ -251,6 +251,11 @@ items = ["one", "two", "three"];
 2: three
 ```
 
+#### access DOM from lw-for
+
+You could access DOM nodes for each element in a `lw-for` loop by calling
+`elem.getDom()` as long as `typeof elem` evaluates `object`.
+
 ### lw-model and lw-on:
 
 ```html
@@ -350,6 +355,8 @@ Here is a few examples how Leanweb helps web components work with form binding.
 
 ### Checkbox
 
+#### Multiple chechboxes bound to an array
+
 ```javascript
 // ...
 items = ['one', 'two', 'three'];
@@ -375,6 +382,24 @@ checkedValues = [];
 
 <img src='https://leanweb.app/images/leanweb-form-binding-checkbox.gif' alt='Leanweb Form Binding Checkbox'/>
 
+#### Single checkbox bound to a boolean value
+
+```javascript
+checked = false;
+toggleCheckbox() {
+    this.checked = !this.checked;
+    this.update();
+}
+```
+
+```html
+<button lw-on:click="toggleCheckbox()">Toggle Checkbox</button>
+<div>
+  <input type="checkbox" lw-model="checked" />
+  <span lw>checked</span>
+</div>
+```
+
 ### Select
 
 ```javascript

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "leanweb",
-   "version": "1.2.2",
+   "version": "1.2.5",
    "description": "Builds framework agnostic web components.",
    "bin": {
       "leanweb": "leanweb.js",

package/templates/lib/lw-element.js

@@ -230,10 +230,9 @@ export default class LWElement extends HTMLElement {
             }
             eventNode[attrName] = true;
             const interpolation = this.ast[attrValue];
-
-            const context = this._getNodeContext(eventNode);
             interpolation.lwValue.split(',').forEach(eventType => {
                eventNode.addEventListener(eventType.trim(), (event => {
+                  const context = this._getNodeContext(eventNode);
                   const eventContext = { '$event': event, '$node': eventNode };
                   const parsed = parser.evaluate(interpolation.ast, [eventContext, ...context], interpolation.loc);
 
@@ -262,8 +261,8 @@ export default class LWElement extends HTMLElement {
       }
       modelNode['model_event_bound'] = true;
       const interpolation = this.ast[key];
-      const context = this._getNodeContext(modelNode);
       modelNode.addEventListener('input', (event => {
+         const context = this._getNodeContext(modelNode);
          const astModel = interpolation.ast[0].expression;
          let object;
          let propertyExpr;
@@ -462,6 +461,9 @@ export default class LWElement extends HTMLElement {
             node.setAttribute('lw-context', '');
             currentNode.insertAdjacentElement('afterend', node);
          }
+         if (item && typeof item === 'object') {
+            item.getDom = () => node;
+         }
          currentNode = node;
          const itemContext = { [interpolation.itemExpr]: item };
          if (interpolation.indexExpr) {