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

Question

当我有一个由<template>生成的元素的引用时，在Polymer.js中，这样的元素有一个属性templateInstance ，它提供了对它的模板的引用，就像它在这里使用的那样：

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

Answer 1

聚合物> = 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">
}

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

聚合物<= 0.16.0

编辑

以下示例仅需要此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;

编辑结束

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

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

的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中完成

问题描述

1 个解决方案

解决方案1
8 已采纳 2014-07-02 11:36:17

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

问题描述

1 个解决方案

解决方案1 8 已采纳 2014-07-02 11:36:17

解决方案1
8 已采纳 2014-07-02 11:36:17