다트 M2 (web_ui)에 웹 구성 요소로드

다트 여행을 통해 구성 요소를로드하는 측면에서 '차단기'를 발견했습니다.다트 M2 (web_ui)에 웹 구성 요소로드

다음과 같이 정의 내 구성 요소를 가지고 있지만 :

<!DOCTYPE html> 
<element name="x-foo" constructor="FooComponent" extends="button"> 
    <template> 
    <button type="button" class="btn {{classes}}"> {{text}} </button> 
    </template> 

    <script type="application/dart"> 

    import 'package:web_ui/web_ui.dart'; 

    String classes = ''; 
    String text = ''; 

    class FooComponent extends WebComponent { 

    } 
    </script> 
</element>

을하고 다음과 같이 구성 요소를 참조 : foo.html을 :

<!DOCTYPE html> 

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>example</title> 
    <link rel="stylesheet" href="assets/css/bootstrap.min.css"> 
    <!-- '../web/foo.html' or '../web/out/foo.html.dart' --> 
    <link rel="components" href='foo.html'> 
    </head> 
    <body> 
    <h1>example</h1> 

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

    <x-foo></x-foo> 

    <script type="application/dart">void main() { }</script> 
    <script type="text/javascript" src="dart.js"></script> 
    </body> 
</html>

내 빌드 스크립트는 html 파일 (출력 폴더를 만들 수 없습니다. 다트), 나는 어떤 파일을 참조해야하는지 잘 모르겠다.

매뉴얼은 내 문제를 해결하기에 충분 선언되지 않습니다 : 구성 요소 (foo.html을)의 정의 중 하나를 참조하는 http://www.dartlang.org/articles/dart-web-components/spec.html#loading-components

을하거나 출력 (foo.html.dart)가 작동하지 않습니다 생성합니다. 또한 두 파일의 경로를 크롬을 통해 다운로드 한 검사를 통해 두 번 확인했습니다.

내 결론 질문 : 이 참조 (링크 요소 href)는 런타임에 내부 인텔리전스 또는 "실제"사용 가능한 파일을 가리 킵니까? 둘째로, 어느 것이 생성 되었습니까 (html/dart) 또는 소스입니까? 오해를 방지하기 위해

, 내 REPO의 목록을 추가했습니다 :

는

foo 
    packages 
    examples 
    assets 
    dart.js 
    example.html 
    web 
    out 
     foo.html.dart 
    foo.html 
    build.dart

출처

2012-12-19 Ed Michel

Nitpick 다음'examples' 폴더를 호출해야한다'example' : HTTP : //pub.dartlang. org/doc/package-layout.html –

구성 요소 파일 (foo.html) 누락 된 <html><body>...</body></html> 태그 :

<!DOCTYPE html> 
<html> 
<body> 
<element name="x-foo" constructor="FooComponent" extends="button"> 
... 
</element> 
</html> 
</body>

두 파일 (examples.html 및 foo.html)는 같은 기본 디렉토리에 있어야합니다 :

web 
    examples.html 
    foo.html 
    ...

그런 다음, examples.html를 사용할 필요가

build(new Options().arguments, ['web/example.html']);

: 인수 build.dart 내부로 0

그리고 마지막으로, foo.html (즉, web/foo.html입니다)에 연결되는 하나 여야합니다

<link rel="components" href='foo.html'>

출처

2012-12-19 22:10:12

thx, Juan. 귀하의 대답은 가장 정확합니다. HTML 태그와 body 태그는 필요하지 않습니다. 또한 솔루션은 이미 "example.html"을 통해 매핑되고 컴파일 될 것이므로 빌드 목록에 구성 요소를 추가하지 않아도됩니다. 모든 세부 사항에 대해 상세에 반대하는 작업. * 엄지 손가락 * –

당신이 당신의 주 HTML 파일에이 방법은 올바른 것입니다. 참조하는 HTML 문서를 dwc로 컴파일해야하기 때문에 foo.html을 참조하십시오. dwc는 기본 HTML 파일을 가져와 컴파일하고 포함 된 모든 구성 요소를 컴파일합니다. 구성 요소는 Dart로 완전히 컴파일되고 .html 파일은 더 이상 사용되지 않습니다.

구성 요소를 포함하도록 example.html을 편집하려는 경우 example.html을 컴파일해야하고 foo.html이 아니라면 컴파일해야합니다. foo.html.dart를 생성하고 example.html.dart 및 부트 스트랩 스크립트를 사용하여 모든 것을로드합니다.

출처

2012-12-19 22:00:39

다트 M2 (web_ui)에 웹 구성 요소로드

답변

관련 문제