1

我想知道如何在飞镖中以编程方式添加自定义元素？

我的代码是：-

文件：todoitem.html

<!-- import polymer-element's definition -->
<link rel="import" href="packages/polymer/polymer.html">

<polymer-element name="my-li" extends="li">
  <style>
      :host(:hover){
      color: red;
    }
  </style>
  <script type="application/dart" src="todoitem.dart"></script>
</polymer-element>

文件：todoitem.dart：-

import 'package:polymer/polymer.dart';
import "dart:html" as html;

import 'package:logging/logging.dart';

final Logger _widgetlogger = new Logger("todo.item");

@CustomTag('my-li')
class MyListElement extends html.LIElement with Polymer, Observable {

  factory MyListElement() => new html.Element.tag('li', 'my-li');

  MyListElement.created() : super.created() {
    polymerCreated();
  }

  @override
  void attached() {
    super.attached();
    _widgetlogger.info("todoitem attached");
  }

  @override
  void detached() {
    super.detached();
    _widgetlogger.info("todoitem detached");
  }

}

文件：todowidget.html

<!-- import polymer-element's definition -->
<link rel="import" href="packages/polymer/polymer.html">

<polymer-element name="todo-widget" attributes="title">
  <template>
    <style>
    :host(.colored){
      color: blue;
    }
    </style>
    <div>
      <h1>{{title}}</h1>
      <div>
        <input id="inputBox" placeholder="Enter Todo item" on-change="{{addToList}}">
        <button id="deleteButton" on-click="{{deleteAll}}">Delete All</button>
      </div>
      <ul id="todolist">
      </ul>
    </div>
  </template>
  <script type="application/dart" src="todowidget.dart"></script> 
</polymer-element>

对应的 Dart 脚本：-

import 'package:polymer/polymer.dart';
import "dart:html" as html;
import "todoitem.dart";

import 'package:logging/logging.dart';

final Logger _widgetlogger = new Logger("todo.widget");

@CustomTag('todo-widget')
class TodoWidget extends PolymerElement {

  @published String title;
  html.InputElement todoInput;
//  html.ButtonElement deleteButton;
  html.UListElement todolist;

  @override
  void attached() {
    super.attached();
    todolist = $["todolist"];
    todoInput = $["inputBox"];
  }

  TodoWidget.created() : super.created() {
    //This can go into template!!!
    if (title == null) {
      title = "My Todo App";
    }
    ;
  }

  void deleteAll(html.Event e, var detail, html.Node target) {
    _widgetlogger.info("All items deleted");
    todolist.children.clear();
//    print("Clicked");
  }

  void addToList(html.Event e, var detail, html.Node target) {
    _widgetlogger.info("Item added");
    MyListElement li = new MyListElement();
    li
        ..text = todoInput.value
        ..classes.add("todoitem")
        ..onClick.listen((e) => e.target.remove());
    todolist.children.add(li);
    todoInput.value = "";
  }
}

它失败并出现以下错误：-

> 2014.10.29 15:10:32.758   todo.widget [INFO]: Item added (:1) Exception: Uncaught Error: type 'LIElement' is not a subtype of type
> 'MyListElement' of 'function    result'. Stack Trace:
> #0      MyListElement.MyListElement (http://localhost:8081/todowidget.dart:11:34)
> #1      addToList (http://localhost:8081/todowidget.dart:62:28)
> #2      Function.apply (dart:core-patch/function_patch.dart:28)
> #3      GeneratedObjectAccessorService.invoke (package:smoke/static.dart:149:28)
> #4      invoke (package:smoke/smoke.dart:43:41)
> #5      HtmlElement&Polymer.dispatchMethod (package:polymer/src/instance.dart:1054:19)
> #6      BindingDelegate&PolymerEventBindings.getEventHandler.<anonymous
> closure> (package:polymer/src/events.dart:82:32)
> #7      _RootZone.runUnaryGuarded (dart:async/zone.dart:1089)
> #8      _RootZone.bindUnaryCallback.<anonymous closure> (dart:async/zone.dart:1118)
> #9      BindingDelegate&PolymerEventBindings.prepareEventBinding.<anonymous
> closure>.<anonymous closure> (package:polymer/src/events.dart:101:67)

我想知道如何在飞镖中以编程方式添加自定义元素？

4

1 回答 1

1

编辑

似乎您的文件 todowidget.html 需要导入 my_li.html

<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="myli.html">
<polymer-element name="todo-widget" attributes="title">

老的

仍然存在一个问题，即每个库缺少对多个元素类的支持。

尝试将 Dart 脚本拆分为两个文件（每个 Polymer 元素一个）。

于 2014-10-29T14:35:40.663 回答