聚合物dom-如果不工作

Question

我有这个模板dom - 如果使用Polymer 1.X，它就无效了。

应该显示＆＃39;正在加载＆＃39;当requirement.allLoaded为false时，requirement.allLoaded为true时显示真实内容。

我在测试函数中切换此变量的状态。但它并没有起作用。

＆＃13;

＆＃13;

//Properties
requirement: {
    type:Object,
    value: {
        allLoaded: false,
        tagsLoaded: false
    }
}
//Test function
_testButton: function(){
    console.log(this.requirement);
    this.requirement.allLoaded = !this.requirement.allLoaded;
    console.log(this.requirement);

},

＆＃13;

<div id="modal-content">
    <template is="dom-if" if={{!requirement.allLoaded}}>
        <p>Loading</p>
    </template>
    <template is="dom-if" if={{requirement.allLoaded}}>
        <iron-pages selected="[[selectedTab]]" attr-for-selected="name" role="main">
            <details-tab name="details"></details-tab>
            <bar-chart-tab name="barchart"></bar-chart-tab>
            <live-data-tab name="livedata" shared-info='{{sharedInfo}}'></live-data-tab>
        </iron-pages>
    </template>
</div>

＆＃13;

＆＃13;

＆＃13;

注意：我已经使用这种结构来显示/不显示其他项目中的东西（使用Polymer 2）并且它正在工作。

Answer 1

只是改变不起作用吗？即它在加载时显示正确吗？

尝试通知Polymer更改： this.requirement.allLoaded = !this.requirement.allLoaded; this.notifyPath('requirement.allLoaded');

Answer 2

您还可以将this.set('property.subProperty', value)用于Observable Changes 在您的情况下，那是this.set('requirement.allLoaded', !this.requirement.allLoaded);