Question

我收到以下错误：

Stack Trace: #0      NoSuchMethodErrorImplementation._throwNew (dart:core-patch:641:3)
#1      init_autogenerated (http://127.0.0.1:3030/C:/dev/CalendarDatePicker/CalendarDatePicker/web/out/CalendarDatePicker.dart:43:26)
#2      main (http://127.0.0.1:3030/C:/dev/CalendarDatePicker/CalendarDatePicker/web/out/CalendarDatePicker.html_bootstrap.dart:7:30)

这是我的观看代码：

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>CalendarDatePicker</title>
    <link rel="stylesheet" href="CalendarDatePicker.css">
  </head>
  <body>
    <element name="calendar" constructor="Calendar" extends="div">
      <template>
        <table>
          <tr>
            <th>Sun</th>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
          </tr>
        </table>
      </template>
    </element>
    <div is="calendar"></div>
    <script type="application/dart" src="CalendarDatePicker.dart"></script>
    <script type="text/javascript" src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
  </body>
</html>

这是我的主要剧本：

import 'dart:html';
import 'dart:core';
import 'package:web_ui/web_ui.dart';


void main() {

}

class Calendar extends WebComponent
{

}

此行自动生成的代码失败：

new Calendar.forElement(__e0)
  ..created_autogenerated() //Exception: No such method: 'Calendar.forElement'
  ..created()
  ..composeChildren();

Answer 1

您应该更改<element> name，使其以x-开头：

<element name="x-calendar" constructor="Calendar" extends="div">

和<div is="calendar"></div>到：

<x-calendar></x-calendar>

如果您愿意，也可以使用is=语法。

这些是建议的更改，但不解决问题。这将起作用的方式是

class Calendar extends WebComponent {}

在<element>标记内进入<template>本身（作为<script>的兄弟姐妹）。

另一种方法是将组件代码隔离在单独的文件中，并使用正确的语法显式导入它。像这样：

<link rel="components" href="calendar_component.html">

所以，我已将您的应用分解为4个文件。主要的html文件calendarPicker.html如下所示：

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>CalendarDatePicker</title>
    <link rel="stylesheet" href="calendarDatePicker.css">
    <link rel="components" href="calendar_component.html">
  </head>
  <body>
    <x-calendar></x-calendar>

    <script type="application/dart" src="calendarDatePicker.dart"></script>
    <script type="text/javascript" src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
  </body>
</html>

calendarDatePicker.dart非常小：

import 'dart:html';
import 'package:web_ui/web_ui.dart';

void main() {}

您的组件代码（calendar_component.dart）包含以下代码：

<!DOCTYPE html>
<html>
  <body>
    <element name="x-calendar" constructor="CalendarComponent" extends="div">
      <template>
        <table>
          <tr>
            <th>Sun</th>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
          </tr>
        </table>
      </template>
      <script type="application/dart" src="calendar_component.dart"></script>
    </element>
  </body>
</html>

随附的dart文件（calendar_component.dart）中包含组件类：

import 'package:web_ui/web_ui.dart';

class CalendarComponent extends WebComponent {}

希望这会有所帮助。我使用您提供的代码构建了应用程序并复制了错误;然后，我用这里显示的代码重建了它。它运行没有任何错误。

Answer 2

正如Shailen所说，<element>标记应包含定义日历类型的<script>标记（可能带有src =属性）。

更多信息： http://www.dartlang.org/articles/dart-web-components/#component-declaration

我还提交了错误https://github.com/dart-lang/web-ui/issues/297，因为你不应该收到noSuchMethod错误：）

导致NoSuchMethodError实现的原因是什么？

2 个答案: