프로그래밍 방식으로 dataList 만들기

Question

셀 중 하나에 데이터 목록이 포함되어있는 테이블을 프로그래밍 방식으로 만들려고합니다. 다음 코드 조각은

@CustomTag('phone-form') 
    class PhoneForm extends PolymerElement 
    { 
    @observable List<String> providers = [ '', 'AT&T', 'Digicel', 'Flow', 'Lime' ]; 
    @observable List<String> phones = ['', 'Car', 'Call-back', 'Fax', 'Home', 'Home Fax', 'Home Mobile', 
          'Home Video', 'Mobile', 'Pager', 'Work', 
          'Work Direct', 'Work Fax', 'Work Mobile', 'Work Video', 
          'Next-of-Kin Home', 'Next-of-Kin Mobile', 
          'Next-of-Kin Work', 'Tollfree', 'Web Phone']; 

    int phoneSelectedIndex = 0; 

    TableElement table; 


    PhoneForm.created() : super.created() 
    { 
     table = $['table']; 
     //table.border="2"; 

     TableSectionElement head = table.createTHead(); 

     TableRowElement th = table.tHead.insertRow(-1); 
     th.insertCell(0).text = "Type"; 
     th.insertCell(1).text = "Provider"; 
     th.insertCell(2).text = "Number"; 

     ButtonElement newLineBtn = new ButtonElement() 
      ..text = 'New Number' 
      ..onClick.listen((e) 
       { 

       e.preventDefault(); 
       insertRow(); 

       }); 

     th.insertAdjacentElement('beforeend', newLineBtn); 


    } 


    void insertRow() 
    { 

     Phone new_phone = new Phone(); 

     TableSectionElement tBody = table.createTBody(); 

     TableRowElement newLine = tBody.insertRow(-1); // add at the end 
     newLine.insertCell(0).insertAdjacentHtml('beforeend', 
     '''<input id='provider' 
      name='provider' 
      type='text' 
      value='{{${phone.provider}}}' 
      list='providers' 
      placeholder='Verizon' 
      required 
      on-change='{{${submit}}}'> 

      <datalist id='providers'> 
      <template repeat='{{provida in providers}}'> 
       <option value='{{provida}}'>{{provida}}</option> 
      </template> 
      </datalist> 
     '''); 

     DataListElement provider = new DataListElement() 
     ..onClick.listen((e) 
       { 

       }); 
     newLine.insertCell(1).insertAdjacentElement('beforeend', provider); 

     TextInputElement numElem = new TextInputElement(); 
     numElem.onChange.listen((e) 
       { 
       print('Changeed'); 
       new_phone.num = numElem.value; 

       print(encode (new_phone)); 


       }); 


     newLine.insertCell(2).insertAdjacentElement('beforeend', numElem); 

    } 

그러나

... 트리플 따옴표로 콧수염 내용의 1. 없음 2. 어떻게

아래의 코드로 프로그래밍하여 DataList를 만들 수 있습니다 예상대로 렌더링되지이다

 DataListElement provider = new DataListElement() 
     ..onClick.listen((e) 
       { 

       }); 

Answer 1

필자가 아는 한, 콧수염을 포함하는 동적으로 작성된 마크 업을 필드에 바인딩하는 것은 가능하지 않습니다.

중합체 0.15.0은 injectBoundHtml을 더한다. 사용 된 표현식은 이미 어딘가에서 사용되어야하므로 Smoke는 코드를 생성하도록 알고 있습니다. 자세한 내용은 https://groups.google.com/a/dartlang.org/d/msg/web/uqri0fpGH10/dPm169WUiUwJ을 참조하십시오.

그냥 폴리머 요소의 템플릿에 HTML을 넣으십시오.
귀하의 예에서 왜 HTML을 동적으로 만들어야하는지 이유를 알 수 없습니다.

HTML을 동적으로 추가하려는 경우 목록을 반복하고 생성 된 HTML에 직접 바인딩 할 값을 포함 할 수도 있습니다.

동적으로 HTML을 빌드해야한다면 Node.bind()을 사용하여 동적으로 바인딩을 만들 수 있습니다. 여기

는 Node.bind() Dart: Dynamic usage of polymer-ui-tabs and polymer-ui-pages does not work