How to add attributes to a dynamically created component

Question

I would like to add a published attribute to a dynamically created component. The code for the component is shown below:

  <!DOCTYPE html>

  <link rel="import" href="name-form.html">
  <link rel="import" href="../../shared/red-asterisk.html">

  <polymer-element name='name-view'>
    <template>

      <div id='name-view' class='flex-row-container view'>
        <section id='row0' class='flex-row' >
          <button id='add-name-btn'
                  class='button add-button'
                  on-click='{{addName}}'
                  autofocus>Add Name</button>
          <red-asterisk></red-asterisk>
        </section >

        <section id='names' class='flex-column'>

        </section>
      </div>

    </template>

     <script type="application/dart">

      import 'package:polymer/polymer.dart';
      import 'dart:html' show Event, Node, Element;

      @CustomTag( 'name-view' )
      class NameViewForm extends PolymerEment
      {

        @published String receiver = '';

        NameViewForm.created() : super.created();


        void addName( Event e, var detail, Node target )
        {
          if( $[ 'names' ].children.length < 1 )
          {
            $[ 'names' ].children
                        .add( new Element.tag( 'name-form' ) );


          }

          $['names'].on["deleteDispatch"]
                   .listen( (Event e)
                       {
                          (e.target as Element).remove();

                       });

        }
      }

    </script>
  </polymer-element>

It is the element ('name-form' created by

     $[ 'names' ].children
                 .add( new Element.tag( 'name-form' ) );

to which I would like to add an attribute receiver='patient'.

Thanks

score 0 · Answer 1 · answered Jan 05 '14 at 08:41

0

Is this a follow up question to Custom Events in Nested Polymer Dart UI?. In this case it would not be necessary to create a published attribute. You can just add a field like role in the class and set this field to 'nok-form' or 'patient-form'.

Element nameForm = new Element.tag( 'name-form' )
nameForm.role = 'nok-form';
 $[ 'names' ].children
                 .add(nameForm);

You only need a published attribute when you want to set the value in markup (HTML).

answered Jan 05 '14 at 08:41

Günter Zöchbauer

623,577
216
2,003
1,567

Yes Gunter, it is. In your solution above the field would not be able to help me decide decide where to send the name-form model. Custom Events in Nested Polymer Dart UI -- -- the receiver field looks promising but it would have to be set on the parents of name-form and then access in name-form where it would be used to dynamically determine where to send the name-form's model – st_clair_clarke Jan 05 '14 at 13:53
Why would you do all this? If you don't provide more information about why you would want to do such things it's almost impossible to give some guidance. – Günter Zöchbauer Jan 05 '14 at 13:59
The name model in name-form is sent to either patient or nok models as a nested property so, patient.name = name1 (from an instance of name-form> nested in patient-form; nok.name = name2 (from another instance of name-form nested in nok-form>. I need a mechanism to determine to which model the name1 and name2 model should be sent in the CustomEvent detail. – st_clair_clarke Jan 05 '14 at 14:19
@st_clair_clarke This post doesn't contain a single word **why** you want to do this all. What is the bigger idea behind this architecture? What is the use case? – Günter Zöchbauer Jan 05 '14 at 14:36

How to add attributes to a dynamically created component

1 Answers1

Linked