Permalink
Browse files

feat(refs): Added support for element references

  • Loading branch information...
calebdwilliams committed Jul 14, 2018
1 parent 68096db commit 0e5bce6dc6769d2566ec0aa6fdfb10690fc53895
@@ -83,6 +83,20 @@ Similar to the event bindings above, property bindings use the bracket notation
```html
<input type="text" id="username" name="username" [required]="${this.isRequired}" [value]="${this.username}">
```
## Element references

Similar to React, you can create a simple element reference inside your template with the `ref` attribute:

```html
<input type="text" id="username" ref="username">
```

and in your component file:

```javascript
this.username = this.refs.username.value;
```

## Repeat directive

Need to use the same template on multiple items? You can use the `<t-repeat>` element to loop over data:
@@ -174,6 +174,7 @@ class Template {
}

_walk(walker, parts) {
this.context.refs = this.context.refs || {};
while (walker.nextNode()) {
const { currentNode } = walker;
if (!currentNode.__templiteralCompiler) {
@@ -187,14 +188,15 @@ class Template {
const attribute = attributes[i];
if (attribute.value.match(valuePattern) || attribute.name.match(propPattern)) {
boundAttrs.set(attribute.name, attribute);
}
if (attribute.name.match(eventPattern)) {
} else if (attribute.name.match(eventPattern)) {
const eventName = attribute.name.substring(1, attribute.name.length - 1);
boundEvents.set(eventName, attribute.value);
this.eventHandlers.push({ eventName, currentNode });
}
if (attribute.name.match(modelPattern)) {
} else if (attribute.name.match(modelPattern)) {
boundEvents.set(modelSymbol, attribute.value);
} else if (attribute.name.match('ref')) {
this.context.refs[attribute.value] = currentNode;
console.dir(this.context);
}
}
if (boundAttrs.size >= 1 || boundEvents.size >= 1) {
@@ -224,7 +226,9 @@ class Template {

for (let i = 0; i < values.length; i += 1) {
if (values[i] !== this.oldValues[i]) {
this.partIndicies.get(i).update(values);
window.requestAnimationFrame(() =>
this.partIndicies.get(i).update(values)
);
}
}
}

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -170,6 +170,7 @@ class Template {
}

_walk(walker, parts) {
this.context.refs = this.context.refs || {};
while (walker.nextNode()) {
const { currentNode } = walker;
if (!currentNode.__templiteralCompiler) {
@@ -183,14 +184,15 @@ class Template {
const attribute = attributes[i];
if (attribute.value.match(valuePattern) || attribute.name.match(propPattern)) {
boundAttrs.set(attribute.name, attribute);
}
if (attribute.name.match(eventPattern)) {
} else if (attribute.name.match(eventPattern)) {
const eventName = attribute.name.substring(1, attribute.name.length - 1);
boundEvents.set(eventName, attribute.value);
this.eventHandlers.push({ eventName, currentNode });
}
if (attribute.name.match(modelPattern)) {
} else if (attribute.name.match(modelPattern)) {
boundEvents.set(modelSymbol, attribute.value);
} else if (attribute.name.match('ref')) {
this.context.refs[attribute.value] = currentNode;
console.dir(this.context);
}
}
if (boundAttrs.size >= 1 || boundEvents.size >= 1) {
@@ -220,7 +222,9 @@ class Template {

for (let i = 0; i < values.length; i += 1) {
if (values[i] !== this.oldValues[i]) {
this.partIndicies.get(i).update(values);
window.requestAnimationFrame(() =>
this.partIndicies.get(i).update(values)
);
}
}
}
Oops, something went wrong.

0 comments on commit 0e5bce6

Please sign in to comment.