以编程方式创建dataList [英] Creating a dataList programatically
问题描述
我试图以编程方式创建一个表，其中一个单元格包含一个datalist。以下是代码段
： @CustomTag '）
class PhoneForm extends PolymerElement
{
@observable List< String> providers = [''，'AT& T'，'Digicel'，'Flow'，'Lime'];
@observable List< String>电话= [''，'汽车'，'回拨'，'传真'，'家'，'家庭传真，'家庭移动'，
'家庭视频'，'移动'，' ，'Work'，
'Work Direct'，'Work Fax'，'Work Mobile'，'Work Video'，
'Next-of-Kin Home' ，
'Next-of-Kin Work'，'Tollfree'，'Web Phone'];
int phoneSelectedIndex = 0;
TableElement表;
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 end 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 ='{ }}'>
< 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.如何在下面的代码中以编程方式创建datalist
DataListElement provider = new DataListElement（）
..onClick.listen（（e）
{
}感谢解决方案 div> 据我所知，不可能使包含mustaches的动态构建的标记绑定到字段。
Polymer 0.15。 0添加 injectBoundHtml 。
所使用的表达式必须已经在某处使用，因此Smoke知道为它们生成代码。
请参见 https://groups.google。 com / a / dartlang.org / d / msg / web / uqri0fpGH10 / dPm169WUiUwJ 了解更多详情。
只要将HTML插入您的聚合物模板元素。
我在示例中看不到原因，因为您需要动态创建HTML。
如果您绝对要添加HTML动态地你也可以迭代你的列表，并包括你想绑定到生成的HTML直接的值。
如果你必须动态建立你的HTML，你可以使用 Node.bind（）动态创建绑定。
下面是一个使用 Node .bind（） Dart：polymer-ui-tabs和polymer-ui-pages的动态使用不起作用< a>
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)
{
});
Thanks
解决方案 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
这篇关于以编程方式创建dataList的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
