Menu
When I have a reference to an element that was produced by a <template>, in Polymer.js such elements have an attribute templateInstance that provides a references to its template like it's used here:
https://github.com/PolymerLabs/polymer-selector/blob/master/polymer-selector.html#L286
275
Polymer >= 1.0.0
@reflectable
void someClickHandler(dom.Event event, [_]) {
// for native events (like on-click)
var model = new DomRepeatModel.fromEvent(event);
// or for custom events (like on-tap, works also for native events)
var model = new DomRepeatModel.fromEvent(convertToJs(event));
var value = model.jsElement['items'];
// or
var value = model.jsElement[$['mylist'].attributes['as']];
// if you used the `as="somename"`
// in your <core-list> or <template is="dom-repeat">
}
There is an open issue related to custom events: https://github.com/dart-lang/polymer-dart/issues/624
Polymer <= 0.16.0
EDIT
The example below needs only this 3 lines, the other code is just for demonstration purposes
import 'package:template_binding/template_binding.dart' as tb;
tb.TemplateInstance ti = tb.nodeBind(e.target).templateInstance;
var value = ti.model.value as Inner;
EDIT END
This functionality was added recently (see https://code.google.com/p/dart/issues/detail?id=17462)
I created an example to test how it works:
index.html
<!DOCTYPE html>
<html>
<head>
<title>nested-repeat</title>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="nested_templates.html">
</head>
<body>
<nested-templates></nested-templates>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
</html>
nested_templates.html
<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="nested-templates">
<template>
<style>
:host { display: block; height: 100%; }
ul { margin: 0; padding: 0; }
li { font-size: 0.85rem; padding-left: 0.75rem; }
li:hover { background: lightgrey; cursor: pointer; }
li.selected { color: red; }
</style>
<div>
<template repeat="{{o in outer}}">
<strong>{{o.name}}</strong>
<ul>
<template repeat="{{i in o.inner}}">
<li id="{{i.name}}" on-click="{{innerClickHandler}}" template-value='{{i}}'>{{i.name}}</li>
</template>
</ul>
</template>
</div>
</template>
<script type="application/dart" src="nested_templates.dart"></script>
</polymer-element>
nested_templates.dart
import 'dart:html' as dom;
import 'package:polymer/polymer.dart';
import 'package:template_binding/template_binding.dart' as tb;
@CustomTag('nested-templates')
class NestedTemplates extends PolymerElement {
NestedTemplates.created() : super.created();
@observable List<Outer> outer = toObservable([new Outer('o1', toObservable(
[new Inner('a'), new Inner('b')])), new Outer('o2', toObservable([new Inner(
'c'), new Inner('d')]))], deep: true);
void innerClickHandler(dom.Event e) {
shadowRoot.querySelectorAll('li.selected').forEach((e) => (e as
dom.HtmlElement).classes.remove('selected'));
(e.target as dom.HtmlElement).classes.add('selected');
tb.TemplateInstance ti = tb.nodeBind(e.target).templateInstance; // get access to the TemplateInstance of the element
// TemplateInstance provides access to the model and the actual value
var value = ti.model.value as Inner;
print('name: ${value.name}'); // works
print('equals: ${value == (e.target as dom.HtmlElement).attributes['template-value']}'); // prints "false"
print(
'${(e.target as dom.HtmlElement).attributes['template-value']}'); // prints "Instance of 'Inner'"
// shows that the attribute only has the result of 'toString()' but not the actual value of type 'Inner'
print(
'${(e.target as dom.HtmlElement).attributes['template-value'].runtimeType}'); // prints "String"
}
}
class Inner extends Observable {
@observable String name;
Inner(this.name);
}
class Outer extends Observable {
@observable String name;
List<Inner> inner;
Outer(this.name, this.inner);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With