以編程方式創建dataList

我正嘗試以編程方式在其中一個單元格包含數據列表的位置創建表。下面是摘錄以編程方式創建dataList

@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.我如何編程創建數據列表下面的代碼中

呈現

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

       });

來源

2014-05-08 st_clair_clarke

~~據我所知，它不可能使動態構建的標記包含鬍鬚綁定到字段。~~

聚合物0.15.0增加injectBoundHtml。已使用的表達式必須已經在某處使用，因此Smoke知道爲它們生成代碼。有關更多詳細信息，請參見https://groups.google.com/a/dartlang.org/d/msg/web/uqri0fpGH10/dPm169WUiUwJ。

只需將HTML放入您的Polymer元素的模板中即可。
我看不出你的例子中的一個理由，你爲什麼需要動態地創建HTML。

如果您絕對要動態添加HTML，您還可以遍歷列表，並將要直接綁定到生成的HTML中的值包括在內。

如果您必須動態構建HTML，則可以使用Node.bind()動態創建綁定。

下面是一個使用Node.bind()Dart: Dynamic usage of polymer-ui-tabs and polymer-ui-pages does not work

來源

2014-05-09 04:18:23

感謝岡特的例子，但我怎麼創建使用DataListElement編程DataList控件 - 我不能看到如何提供名單elemennts。 –

爲什麼你想以編程方式創建它？ –

在上面的代碼中，我必須先添加表頭，然後分別添加表格單元格內容。我認爲以編程方式創建單元格內容可能更容易，而不是使用html5插入方法聲明性地創建單元格內容。 –

以編程方式創建dataList

回答

相關問題