2012-12-26 90 views
2

我需要生成List的單選按鈕輸入列表,並將<label for="xx">標記鏈接到<input>,每個標籤都需要自己的標識。Dart可以綁定到id屬性嗎?

但似乎達特不能綁定到一個id屬性:

<div id="{{s}}"> 
    <p id="text">{{s}}</p> <!-- Works as expected --> 
</div> 

上述結果錯誤:

Error: line 40 pos 22: illegal use of class name 'DivElement' autogenerated_html.DivElement __{{s}};

所以我的問題是:能否省道綁定到一個id屬性,如果是的話如何?

另一個問題:是否有另一種方法使用web_ui生成帶標籤的單選按鈕輸入列表?

回答

1

如您的示例所示,web ui編譯器以非常特殊的方式使用ID。編譯器假定它們是字符串常量,並使用它們生成字段和局部變量名稱,並且還可以查詢生成的代碼中的元素。

我想說這是一個bug /功能請求,應該在web_ui中以某種方式解決。你可以在這裏關注這個問題的進度:https://github.com/dart-lang/web-ui/issues/284

3

我會嘗試回答您的備選問題。您可以創建一對元素 - 單選按鈕輸入和標籤 - 並根據需要附加到DOM。要創建,「男性」和「女性」按鈕,你可以這樣做:

var button1 = new RadioButtonInputElement(); 
button1.name = "sex"; 
button1.value = "male"; 
button1.attributes['id'] = "sex_male"; 
var button1_label = new LabelElement(); 
button1_label.attributes['for'] = button1.id; 
button1_label.text="Male"; 

var button2 = new RadioButtonInputElement(); 
button2.name = "sex"; 
button2.value = "female"; 
button2.attributes['id'] = "sex_female"; 
var button2_label = new LabelElement(); 
button2_label.attributes['for'] = button2.id; 
button2_label.text="Female"; 

使用new RadioButtonInputElement()創建一個無線輸入;使用new LabelElement()創建伴隨的標籤。

此代碼不是特別幹;如果你要生成很多這些,你可能需要將它重構成一個函數。事情是這樣的:

List createButtonWithLabel(name, value) { 
    var button = new RadioButtonInputElement(); 

    button.name = name; 
    button.value = value; 
    button.attributes['id'] = "${name}_${value}"; 
    var label = new LabelElement(); 
    label.attributes['for'] = button.id; 
    label.text=value.toUpperCase(); 
    return [button, label]; 
} 

,然後用它是這樣的:

var form = new FormElement(); 
form.nodes.addAll(createButtonWithLabel('sex', 'male')); 
form.nodes.addAll(createButtonWithLabel('sex', 'female')); 
query('body').nodes.add(form); 

這應該給你一個表格2個單選按鈕。

+0

謝謝你的回答。我遵循,並可以看到它會起作用。但是,目標是使用web_ui來完成此操作,以避免在代碼中生成元素(這很單調乏味,而且還存在維護問題)。 –

相關問題