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

~~据我所知，不可能将包含mustaches的动态构建标记绑定到字段。~~

聚合物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

的示例

以编程方式创建dataList

1 个答案: