Creating a dataList programmatically

Question

I am trying to create a table programmatically where one of the cells contains a datalist. Below is the snippet

  @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 );

    }

However ... 1. None of the mustache content in the triple quotes is rendered as expected 2. How can I create the datalist programmatically in the code below

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

              });

score 1 · Accepted Answer · edited May 23 '17 at 12:21

1

~~As far as I know it is not possibly to make dynamically built markup containing mustaches bind to fields.~~

Polymer 0.15.0 adds injectBoundHtml. The used expressions must already be used somewhere so Smoke knows to generate code for them. See https://groups.google.com/a/dartlang.org/d/msg/web/uqri0fpGH10/dPm169WUiUwJ for more details.

Just put the HTML into the template of your Polymer element.
I can't see a reason in your example why you would need to create the HTML dynamically.

If you absolutely want to add the HTML dynamically you could also iterate over your list and include the values you want to bind directly into the generated HTML.

If you must build your HTML dynamically you can use Node.bind() to create bindings dynamically.

Here is an example that uses Node.bind() Dart: Dynamic usage of polymer-ui-tabs and polymer-ui-pages does not work

edited May 23 '17 at 12:21

Community

1
1

answered May 09 '14 at 04:18

Günter Zöchbauer

623,577
216
2,003
1,567

Thanks Gunter, but how do I create the DataList using DataListElement programmatically - I cannot seen how to provide the list elemennts. – st_clair_clarke May 09 '14 at 05:32
Why do you want to create it programmatically? – Günter Zöchbauer May 09 '14 at 05:34
In the above code, I have to add the table header first and then add the table cell contents individually. I thought it might be easier to create the cell content programmatically rather than declaratively with html5 for the insert method. – st_clair_clarke May 09 '14 at 12:34
Why should it be difficult to write HTML? This is what Polymer is for, that you can use HTML to build the view and Dart to build the model/business logic. I Polymer it gets difficult when you do it like in your question. – Günter Zöchbauer May 09 '14 at 12:35
I did not say it was difficult. For the use case I thought it might be easier to do it programmatically. – st_clair_clarke May 09 '14 at 12:38

Creating a dataList programmatically

1 Answers1

Linked