동적 WebComponent div 추가

다트를 사용하여 여러 div를 동적으로 추가하려고합니다. div에 사용자 정의 웹 구성 요소가 포함되어 있으며 변수를 전달하려고합니다. n 개의 변수를 지정하고 n 구성 요소 수로 전달하고이를 HTML 문서에 삽입 할 수있게하려고합니다. 무슨 일이 일어나고 있는지, 변수없이 삽입 된 div를 얻고있는 것입니다. Dart가 이미로드 된 DOM에 무언가를 전달하려고 시도하는 것이므로 아무 것도하지 않는 것이 아닌지 궁금합니다 ...?동적 WebComponent div 추가

product_elem.dart :

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

class ProductComponent extends WebComponent { 
    var productId; 
}

product_elem.html :

<!DOCTYPE html> 
    <html> 
    <body> 
     <element name="product-elem" constructor="ProductComponent" extends="div"> 
     <template> 
      <div style="width:335px;margin:10px;"> 
      <h3> 
       {{productId}} 
      </h3> 
     </div> 
     </template> 
     <script type="application/dart" src="product_elem.dart"></script> 
    </element> 
    </body> 
</html>

testcase_component.dart :

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

var productId; 

void main() { 
    List myList = new List(); 
    myList.addAll(["Foo", "Bar", "Baz"]); 
    for (var i = 0; i < myList.length; i++) { 
    productId = myList[i]; 
    query('#products').innerHtml += 
     "<div is='product-elem' id='product_elem' product-id='{{productId}}'></div>"; 
    } 
}

testcase_component.html :

<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="import" href="product_elem.html"> 
    </head> 
    <body> 
    <div id="products"> 
     <!-- Insert dynamic divs here --> 
    </div> 
    <script type="application/dart" src="testcase_component.dart"></script> 
    <script src="packages/browser/dart.js"></script> 
    </body> 
</html>

012 여기에 몇 가지 코드입니다

출처

2013-06-17 jmoneystl

그런 WebComponents를 추가 할 수는 없습니다. WebUI는 아무것도 추가되지 않았다는 것을 알기 때문에 정상 div로 끝납니다. 적절한 웹 UI 수명주기가 호출

void main() { 
    List myList = new List(); 
    myList.addAll(["Foo", "Bar", "Baz"]); 
    for (var i = 0; i < myList.length; i++) { 
    productId = myList[i]; 
    var product = new ProductComponent(productId); 
    product.host = new DivElement(); 
    var lifecycleCaller = new ComponentItem(product)..create(); 
    query('#products').append(product.host); 
    lifecycleCaller.insert(); 
    } 
}

이 방법 :

여기에 동적으로 WebComponents를 추가 할 수있는 전류 (약간 지저분) 방법입니다. productId에이 외부에서 설정 될 수 있도록

또한 ProductElem에 대한 생성자를 추가해야합니다 : 귀하의 답변에 대한

class ProductComponent extends WebComponent { 
    var productId; 

    ProductComponent(this.productId); 

}

출처

2013-06-17 18:02:28

감사합니다. 이상하게도, 'ProductComponent'에 생성자를 추가 한 후에'예외 발생 :'ProductComponent '클래스에 선언 된'ProductComponent '생성자가 없습니다 .' – jmoneystl

Dartium에서 테스트하기 전에 반드시 WebUI 컴파일러를 실행하십시오. DartEditor를 사용한다면 build.dart를 오른쪽 클릭하고 Run을 선택하십시오. –

작업 중. 감사! – jmoneystl

동적 WebComponent div 추가

답변

관련 문제