Блог

Главная - Вопросы по программированию - В Polymer.js дочерние элементы шаблона имеют ссылку на шаблон, как это можно сделать в Polymer.dart

В Polymer.js дочерние элементы шаблона имеют ссылку на шаблон, как это можно сделать в Polymer.dart

#dart #dart-polymer

#dart #dart-polymer

Вопрос:

Когда у меня есть ссылка на элемент, который был создан <template> , в Polymer.js у таких элементов есть атрибут templateInstance , который предоставляет ссылки на его шаблон, как он используется здесь:

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

Ответ №1:

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

Существует открытая проблема, связанная с пользовательскими событиями:https://github.com/dart-lang/polymer-dart/issues/624

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

Комментарии:

1. Рад, что нашел это. Этот материал расстроит людей, которые пробуют Dart Polymer и ожидают четности функций или, по крайней мере, хорошей документации относительно различий.