个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-04 11:38:02 25 4
gpt4 key购买 nike

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

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

最佳答案

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

关于dart - 在 Polymer.js 中模板的子代有对模板的引用，这如何在 Polymer.dart 中完成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24530054/

25 4 0
文章推荐： import - 在 IntelliJ 中获取导入建议
文章推荐： powershell - emacs Powershell与Powershell模式
文章推荐： asp.net - Firefox 中意外的 Signalr 连接中止
文章推荐： c - 读取数据并使用 scanf 跳过括号