Polymer&Play Framework - passing an array to a custom tag with template args

Question

i thank you for any help you can give on this. So here is the thing: i am trying to pass an array to a custom element i created with polymer. Thing is, its not working, when i do a print of that array it gives null. Here is the code:

<link rel="import" href="../../../star-rating/star-rating.html">

<dom-module id="show-rating-answer">
    <style>
    </style>
    <template>
        <div id="scrollable" class="scrollable">
            <label class="control-label">[[answer]]</label>
            <star-rating labels='[[data]]' readonly="[[readonly]]"></star-rating>
        </div>
    </template>
</dom-module>

<script>

(function() {

  Polymer({
    is: 'show-rating-answer',

    properties: {
        answer:String,
        index:Number,
        data: {
            type: Array,
            value: []
        },
        readonly: {
          type: Boolean,
          value: false
        }
      },
    ready:function(){
        alert(this.data)
    }
  })

})();

</script>

show-rating-answer component has a data property that is an array. I want to pass an array to the tag in a Play template:

@(currentSurvey: Survey) @currentSurvey.questions.map{question => ...

    @if(question.answers != None){
        @if(question.questionType.get == "rating"){
           @question.answers.map{answer =>
              <show-rating-answer answer="@answer.answer" index="@answer.index" data="['@question.ratingLabels.get.label']" readonly="true"></show-rating-answer>
        <show-rating-answer answer="@answer.answer" index="@answer.index" data="[@question.ratingLabels.get.label1,@question.ratingLabels.get.label2,@question.ratingLabels.get.label3,@question.ratingLabels.get.label4,@question.ratingLabels.get.label5]" readonly="true"></show-rating-answer>
                                                }
        }else{
           @if(question.questionType.get == "multi"){
               @question.answers.map{answer =>
                   <input type="checkbox" name="multiple" value="@answer.index">&nbsp;&nbsp;@answer.answer<br>
               }
             }else{          
                @if(question.questionType.get == "single"){
                    @question.answers.map{answer =>
                        <input type="radio" name="single" value="@answer.index">&nbsp;&nbsp;@answer.answer<br>
                    }
                }
            }
        }
    }
}

But it gives me null. I tried other things like:

<show-rating-answer answer="@answer.answer" index="@answer.index" data="['@question.ratingLabels.get.label1','@question.ratingLabels.get.label2','@question.ratingLabels.get.label3','@question.ratingLabels.get.label4','@question.ratingLabels.get.label5']" readonly="true"></show-rating-answer>

Any one tried doing this with success?

André Rodrigues André Rodrigues · Accepted Answer · 2015-08-13T10:03:19

Ok the solution i used works, the problem was that i used ' instead of ". This solution doesn´t work:

<show-rating-answer answer="@answer.answer" index="@answer.index" data="['@question.ratingLabels.get.label1','@question.ratingLabels.get.label2','@question.ratingLabels.get.label3','@question.ratingLabels.get.label4','@question.ratingLabels.get.label5']" readonly="true"></show-rating-answer>

because the elements are wrapped in '. But if we change the ' for " like this:

<show-rating-answer answer="@answer.answer" index="@answer.index" data='["@question.ratingLabels.get.label1","@question.ratingLabels.get.label2","@question.ratingLabels.get.label3","@question.ratingLabels.get.label4","@question.ratingLabels.get.label5"]' readonly="true"></show-rating-answer>

it works!Polymer is a bit sensitive in some details like this.

Polymer&Play Framework - passing an array to a custom tag with template args

1 Answers