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)
              {

              });

Answer 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