以编程方式创建dataList [英] Creating a dataList programmatically
问题描述
我正在尝试以编程方式创建一个表格，其中一个单元格包含一个数据列表。下面是代码段
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 );
}
但是...
1.无三引号中的小胡子内容将按预期方式呈现
2。如何在下面的代码中以编程方式创建数据列表
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)
{
});
推荐答案
据我所知不是
聚合物0.15.0添加 injectBoundHtml 。
使用的表达式必须已经在某个地方使用过，Smoke知道可以为它们生成代码。
请参见 https://groups.google .com / a / dartlang.org / d / msg / web / uqri0fpGH10 / dPm169WUiUwJ 了解更多信息。
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.
只需将HTML放入您的模板聚合物元素。
在您的示例中看不到为什么需要动态创建HTML的原因。
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.
如果您绝对要动态添加HTML，您还可以遍历列表，并将要绑定的值直接包含到生成的HTML中。
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.
如果必须动态构建HTML，则可以使用 Node.bind（）动态创建绑定。
If you must build your HTML dynamically you can use Node.bind() to create bindings dynamically.
这里是使用的示例Node.bind（） Dart：无法动态使用Polymer-ui-tabs和polymer-ui-pages
这篇关于以编程方式创建dataList的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
