dart - 以编程方式创建数据列表

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.三重引号中的 mustache 内容没有按预期呈现2. 如何在下面的代码中以编程方式创建数据列表

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

              });

Answer 1

据我所知，不可能使包含 mustache 的动态构建标记绑定(bind)到字段。

Polymer 0.15.0 添加了 injectBoundHtml。使用的表达式必须已经在某处使用，这样 Smoke 才能知道为它们生成代码。参见 https://groups.google.com/a/dartlang.org/d/msg/web/uqri0fpGH10/dPm169WUiUwJ了解更多详情。

只需将 HTML 放入 Polymer 元素的模板中即可。
我在您的示例中看不出您需要动态创建 HTML 的原因。

如果您绝对想动态添加 HTML，您还可以遍历您的列表并将您想要直接绑定(bind)到生成的 HTML 中的值包括在内。

如果您必须动态构建 HTML，您可以使用 Node.bind() 动态创建绑定(bind)。

这是一个使用 Node.bind() 的例子 Dart: Dynamic usage of polymer-ui-tabs and polymer-ui-pages does not work