在从 parent 元素获得属性后控制 child 元素的 dom-if

Question

我对聚合物很陌生，我想执行以下场景... 我有一个绑定变量 {{readonly}}，我通过它在 Polymer

中将数据从 parent Dom-HTML 发送到 Child Dom-HTML

代码片段大致是这样的..

从 parent 调用 child DOM，（我已经在 parent 中用 "true" 初始化了 readonly )

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

在child元素中

<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;
        }

我发现在 Child 元素中，首先触发 created，然后绘制 HTML，然后是局部 [=] 的所有属性53=] 从 parent.

获取价值

但我希望 dom-if 只有在我从 parent {{readonly}}，这样我就可以调用正确的 sub-child-dom [callsome1，或 callsome2]

任何人都可以向我提供 idea/trick 我怎样才能达到要求吗？

提前致谢

Answer 1

而不是调用 this.readOnly 我认为您应该将该变量作为参数传递给 _isReadOnly 函数，如下所示：

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

因此，您的 html 将看起来：

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

在这种情况下，每次 readonly 更改时，都会调用 _isreadonly 函数并更新 DOM。

在从 parent 元素获得属性后控制 child 元素的 dom-if

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

javascript

loopback

node.js

angularjs

polymer

在从 parent 元素获得 属性 后控制 child 元素的 dom-if

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

javascript

loopback

node.js

angularjs

polymer

在从 parent 元素获得属性后控制 child 元素的 dom-if