Control the dom-if of child element, after getting a property from parent element

Question

I am pretty new to polymer, I wanted to perform below scenario... I have a bind variable {{readonly}} through which I send data from parent Dom-HTML to Child Dom-HTML, in Polymer

The code snippet is roughly like this..

calling child DOM from parent,( I already initialized readonly in parent with "true")

<wms-griddata order-obj='{{item}}' readonly='{{readonly}}'></wms-griddata>

In child Element

<dom-module id="wms-griddata">
.....
   <template is="dom-if" if="{{_isreadonly()}}">
    <callsome1></callsome1>
</template>
<template is="dom-if" if="{{!_isreadonly()}}">
    <callsome2></callsome2>
</template> 

 <script>
    Polymer({
    is : 'wms-griddata',
    properties: {
           readonly: {
                    type: String
                }
    .......
    .......
            _isreadonly: function(){
                if(this.readonly == 'true')
                   return true;
                else
                   return false;
        }

I find that in Child Element first the created is fired, then the HTML is painted, then all the properties of the local DOM is getting value from parent.

But I want that the dom-if is validated only after I get the value from the parent {{ readonly }}, so that I can call the correct sub-child-dom [ callsome1, or callsome2 ]

Can anyone please provide me an idea/trick of how can I achieve the requisite?

Thanks in advance

Answer 1

Instead to call this.readOnly I think that you should pass that variable as parameter to _isReadOnly function as follows:

_isreadonly: function(readOnly){
     return readOnly == 'true';
}

So, your html will look:

<template is="dom-if" if="{{_isreadonly(readOnly)}}">
    <callsome1></callsome1>
</template>
<template is="dom-if" if="{{!_isreadonly(readonly)}}">
    <callsome2></callsome2>
</template> 

In this case, everytime readonly change, _isreadonly function will be invoked and the DOM will be updated.