Как переместить WebComponent в папку и использовать его тогда?

Я пытаюсь сделать довольно простые вещи для меня в Dart. Я создал веб-приложение ui из шаблона и хочу переместить веб-компонент xclick-counter из корневой папки. Вот как мой проект выглядит в Dart Editor:Как переместить WebComponent в папку и использовать его тогда?

NewComposite (folder) 
    pubspec.lock (file) 
    pubspec.yaml (file) 
    web (folder) 
     lib(folder) 
     comp1.dart (file) 
     Comp1.html (file) 
     mylib.dart (file) 
     newcomposite.css (file) 
     newcomposite.dart (file) 
     newcomposite.html (file) 
     xclickcounter.dart (file) 
     xclickcounter.html (file)

папка Lib содержит библиотеку, которая просто копию ClickCounter компоненты переименованной в COMP1. Вопрос: Как я должен ссылаться на Comp1, чтобы использовать его внутри newcomposite.html?. До сих пор я получаю количество ошибок в коде папок, которые я даже не должен менять. Смотрите точный код ниже:

Источник mylib.dart:

library mylib; 

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

part 'comp1.dart';

comp1.dart:

part of mylib; 

class Comp1 extends WebComponent { 
    @observable 
    int count = 0; 

    void increment() { 
    count++; 
    } 
}

Comp1.html

<html> 
    <body> 
    <element name="x-comp1" constructor="Comp1" extends="div"> 
     <template> 
     <div> 
      <button on-click="increment()">Click me</button><br /> 
      <span>(click count: {{count}})</span> 
     </div> 
     </template> 
     <script type="application/dart" src="comp1.dart"></script> 
    </element> 
    </body> 
</html>

newcomposite.html (где ссылка должна быть)

<!DOCTYPE html> 

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Sample app</title> 
    <link rel="stylesheet" href="newcomposite.css"> 

    <!-- import the comp1--> 
    <link rel="import" href="lib/comp1.html"> 
    </head> 
    <body> 
    <h1>NewComposite</h1> 

    <p>Hello world from Dart!</p> 

    <div id="sample_container_id"> 
     <div is="x-comp1" id="click_counter" count="{{startingCount}}"></div> 
    </div> 

    <script type="application/dart" src="newcomposite.dart"></script> 
    <script src="packages/browser/dart.js"></script> 
    </body> 
</html>

источник

2013-08-04 user2480273

Вы попытались переместить свой lib, ссылаясь на свой собственный проект в виде пакета в соответствии с моим ответом ниже? Помогло ли это? – ianmjones

Он должен работать лучше, если вы переместите Lib каталог вверх в корневом каталоге вашего проекта:

NewComposite (folder) 
    pubspec.lock (file) 
    pubspec.yaml (file) 
    lib(folder) 
     comp1.dart (file) 
     comp1.html (file) 
     mylib.dart (file) 
    web (folder) 
     newcomposite.css (file) 
     newcomposite.dart (file) 
     newcomposite.html (file) 
     xclickcounter.dart (file) 
     xclickcounter.html (file)

Предполагая, что вы назвали ваш проект как «newcomposite» в pubspec.yaml, вы можете затем импортировать свой компонент в newcomposite.html, обратившись к своей собственной библиотеке проектов:

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Sample app</title> 
    <link rel="stylesheet" href="newcomposite.css"> 

    <!-- import the comp1--> 
    <link rel="import" href="package:newcomposite/comp1.html"> 
    </head> 
    <body> 
    <h1>NewComposite</h1> 

    <p>Hello world from Dart!</p> 

    <div id="sample_container_id"> 
     <div is="x-comp1" id="click_counter" count="{{startingCount}}"></div> 
    </div> 

    <script type="application/dart" src="newcomposite.dart"></script> 
    <script src="packages/browser/dart.js"></script> 
    </body> 
</html>

источник

2013-08-05 13:35:50 ianmjones

Как переместить WebComponent в папку и использовать его тогда?

ответ

Смежные вопросы