Dla dzieci z szablonu Polymer.js odwołanie do szablonu, jak to zrobić w Polymer.dart

Kiedy mam odniesienie do elementu, który został wyprodukowany przez <template>, w Polymer.js takie elementy mają przypisują templateInstance który zapewnia odnośniki do jej szablonu jak to stosowane tutaj:Dla dzieci z szablonu Polymer.js odwołanie do szablonu, jak to zrobić w Polymer.dart

Dziękujemy za udostępnienie! – Robert

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

jest n otwarta kwestia związana z niestandardowych zdarzeń: https://github.com/dart-lang/polymer-dart/issues/624

Polymer < = 0.16.0

EDIT

Poniższy przykład potrzebuje tylko to 3 linie, a drugi kod jest tylko na pokaz celów

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

Ta funkcjonalność dodano niedawno (patrz https://code.google.com/p/dart/issues/detail?id=17462)

stworzyłem przykład sprawdzić, jak to działa:

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

Źródło

2014-07-02 11:36:17

Cieszę się, że znalazłem to. Te rzeczy będą frustruć ludzi wypróbowujących Dart Polymer i oczekujących parytetów funkcji, lub przynajmniej dobrej dokumentacji dotyczącej różnic. –

Dla dzieci z szablonu Polymer.js odwołanie do szablonu, jak to zrobić w Polymer.dart

Odpowiedz

Powiązane problemy