在 Polymer.js 模板的子级中有对模板的引用，这如何在 Polymer.dart 中完成

本文介绍了在 Polymer.js 模板的子级中有对模板的引用，这如何在 Polymer.dart 中完成的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当我引用由生成的元素时，在 Polymer.js 中，此类元素具有一个属性 templateInstance，该属性提供对它的模板就像这里使用的一样:

https://github.com/PolymerLabs/polymer-selector/blob/master/polymer-selector.html#L286

解决方案

Polymer >= 1.0.0

@reflectablevoid someClickHandler(dom.Event 事件, [_]) {//对于原生事件(如点击)var model = new DomRepeatModel.fromEvent(event);//或自定义事件(如 on-tap，也适用于本机事件)var model = new DomRepeatModel.fromEvent(convertToJs(event));var value = model.jsElement['items'];//或者var value = model.jsElement[$['mylist'].attributes['as']];//如果你使用了 `as="somename"`//在你的 <core-list>或 <template is="dom-repeat">}

有一个与自定义事件相关的未决问题:https://github.com/dart-lang/polymer-dart/issues/624

聚合物

编辑

下面的例子只需要这3行，其他代码只是为了演示

import 'package:template_binding/template_binding.dart' as tb;tb.TemplateInstance ti = tb.nodeBind(e.target).templateInstance;var value = ti.model.value 作为内部；

编辑结束

最近添加了此功能(请参阅 https://code.google.com/p/dart/issues/detail?id=17462)

我创建了一个示例来测试它是如何工作的:

index.html

nested_templates.html

<聚合物元素名称=嵌套模板"><模板><风格>:host { 显示: 块;高度:100%；}ul { 边距:0;填充:0；}li { 字体大小:0.85rem;填充左:0.75rem；}li:悬停{背景:浅灰色；光标:指针；}li.selected { 颜色:红色；}</风格><div><template repeat="{{o in external}}"><strong>{{o.name}}</strong><ul><template repeat="{{i in o.inner}}"><li id="{{i.name}}" on-click="{{innerClickHandler}}" template-value='{{i}}'>{{i.name}}</li>

import 'dart:html' as dom;导入'包:聚合物/聚合物.dart'；导入 'package:template_binding/template_binding.dart' 作为 tb;@CustomTag('嵌套模板')类 NestedTemplates 扩展 PolymerElement {NestedTemplates.created() : super.created();@observable 列表外 = 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 asdom.HtmlElement).classes.remove('selected'));(e.target as dom.HtmlElement).classes.add('selected');tb.TemplateInstance ti = tb.nodeBind(e.target).templateInstance;//访问元素的 TemplateInstance//TemplateInstance 提供对模型和实际值的访问var value = ti.model.value 作为内部；打印('名称:${value.name}');//有效print('equals: ${value == (e.target as dom.HtmlElement).attributes['template-value']}');//打印假"打印('${(e.target as dom.HtmlElement).attributes['template-value']}');//打印'内部'的实例"//显示属性只有'toString()'的结果，而不是'Inner'类型的实际值打印('${(e.target as dom.HtmlElement).attributes['template-value'].runtimeType}');//打印字符串"}}类内部扩展可观察的{@observable 字符串名称；内部(this.name)；}类外部扩展可观察{@observable 字符串名称；列表<内部>内;外(this.name，this.inner)；}

@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"> }

<!DOCTYPE html> <html> <head> <title>nested-repeat</title>  <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>

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); }