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

问题描述

当我引用由< template> 生成的元素时，在Polymer.js中，这样的元素有一个属性 templateInstance 提供对其模板的引用，如下所示：

解决方案

Polymer> = 1.0.0

  @reflectable 
 void someClickHandler（dom.Event 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']]; 
 //如果你在< core-list>中使用`as =somename`
 //或< template is =dom-repeat> 
} 
  

有一个与自定义事件相关的开放问题： p>

Polymer

EDIT

下面的示例只需要这3行，其他代码仅用于演示。

  import'package：template_binding / template_binding.dart'as tb; 
 
 tb.TemplateInstance ti = tb.nodeBind（e.target）.templateInstance; 
 var value = ti.model.value as Inner; 
  

编辑结束

此功能最近才添加（请参阅）

我创建了一个示例来测试其工作原理：

index.html

  <！DOCTYPE html> 
 
< html> 
< head> 
< title> nested-repeat< / title> 
<！ - < script src =packages / web_components / platform.js>< / script> 
不再需要Polymer> = 0.14.0  - > 
< script src =packages / web_components / dart_support.js>< / script> 
< link rel =importhref =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 =importhref =packages / polymer / polymer.html> 
 
< polymer-element name =nested-templates> 
< template> 
< style> 
：host {display：block;高度：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 / dartsrc =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 （
'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; //获取元素的TemplateInstance 
 
 // TemplateInstance提供对模型和实际值的访问
 var value = ti.model.value as Inner; 
 
 print（'name：$ {value.name}'）; // works 
 print（'equals：$ {value ==（e.target as dom.HtmlElement）.attributes ['template-value']}'）; // printsfalse
 print（
'$ {（e.target as dom.HtmlElement）.attributes ['template-value']}'）; // printsInstance of'Inner'
 
 //表示该属性只有'toString（）'的结果，而不是'Inner'类型的实际值
 print 
'$ {（e.target as dom.HtmlElement）.attributes ['template-value']。runtimeType}'）; // printsString
} 
 
} 
 
类Inner extends Observable {
 @observable String name; 
 
 Inner（this.name）; 
} 
 
类Outer extends Observable {
 @observable String name; 
 List< Inner>内; 
 
 Outer（this.name，this.inner）; 
} 
  

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

解决方案

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

这篇关于在Polymer.js中，模板的孩子有对模板的引用，如何在Polymer.dart中完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！