Insert Input Tag into td tags via templates

问题

I have a table and each row does have an edit Button. If that button is pressed all the td tag should have a text input tag containing the values. So two templates for each td would bei Too much. <tr template ... > wont work since the td tags will bei ignored by the Browser, because the tds wont See the table around the template. Tried pretty much everything with template and it 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>  <!-- this Button will be pressed -->
   </tr>
</table>

After the Button is pressed the table should look like 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>  <!-- this Button will be pressed -->
   </tr>
</table>

Since is have pretty big tables, templates in each td is not an option. I currently have a workaround at the moment where is use extended td tags with polymer.

回答1:

You could try 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 the backing code containing something like 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 do it using other types of backing data structures, and have something simpler than the info map I created, but I think this is the type of thing you're after.

来源：https://stackoverflow.com/questions/26263218/insert-input-tag-into-td-tags-via-templates

标签

dart

dart-polymer