javascript - 从父元素获取属性后控制子元素的 dom-if

Question

我对 polymer 还很陌生，我想执行以下场景......我有一个绑定(bind)变量 {{readonly}}，通过它我可以在 Polymer 中将数据从父 Dom-HTML 发送到子 Dom-HTML

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

从父级调用子DOM，(我已经在父级中用“true”初始化了readonly)

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

在子元素中

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

我发现在子元素中，首先触发 created，然后绘制 HTML，然后本地 DOM 的所有属性都从父元素获取值。

但我希望仅在从父级 {{readonly}} 获取值后才验证 dom-if，以便我可以调用正确的子级-child-dom [callsome1, 或 callsome2]

任何人都可以向我提供如何实现必要条件的想法/技巧吗？

提前致谢

Answer 1

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

_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。