dart - Insert Input Tag into td tags via templates -

dart - Insert Input Tag into td tags via templates -

i have table , each row have edit button. if button pressed td tag should have text input tag containing values. 2 templates each td bei much. <tr template ... > wont work since td tags bei ignored browser, because tds wont see table around template. tried pretty much template , didnt work.

<table> <tr> <td> td11 </td> <td> td12 </td> <td> <button on-click="{{somefunc}}"/> </td> </tr> <tr> <td> td21 </td> <td> td22 </td> <td> <button on-click="{{somefunc}}"/> </td> <!-- button pressed --> </tr> </table>

after button pressed table should this:

<table> <tr> <td> td11 </td> <td> td12 </td> <td> <button on-click="{{somefunc}}"/> </td> </tr> <tr> <td> <input type="text" value="td21" /> </td> <td> <input type="text" value="td22" /> </td> <td> <button on-click="{{somefunc}}"/> </td> <!-- button pressed --> </tr> </table>

since have pretty big tables, templates in each td not option. have workaround @ moment utilize extended td tags polymer.

you seek this

<table> <tr> <td> <template if="{{info['row1']['active'] == false}}">td11</template> <template if="{{info['row1']['active'] == true}}"><input type="text" value="td11"></template> </td> <td> <template if="{{info['row1']['active'] == false}}">td12</template> <template if="{{info['row1']['active'] == true}}"><input type="text" value="td12"></template> </td> <td> <button id="row1" on-click="{{somefunc}}">click me</button> </td> </tr> </table>

with backing code containing this

map info = toobservable({'row1': {'active': false}}); somefunc(event e) { if(info[e.target.id]['active'] == false) { info[e.target.id]['active'] = true; } else { info[e.target.id]['active'] = false; } }

you can using other types of backing info structures, , have simpler info map created, think type of thing you're after.

dart dart-polymer