是否有可能嵌套/内部dom-if,其中第二个dom-if取决于从第一个dom-if块获得的值

时间:2018-07-12 14:48:59

标签: polymer polymer-1.0 dom-if

我仔细阅读了这些主题

Polymer 1 nested dom-if within dom-repeat not updating when data changes

how to dynamically append an element to dom-if in Polymer?

How to access content of dom-if inside a custom element?

这可能与我的问题有关,但是我没有找到任何线索来说明我是否可以做自己想做的事情和如何做。

在我的公司中,有多个流程,每个流程对应每个业务流程,流程的每个步骤都是一个屏幕,编码为Polymer 1 Web组件。它们全部包裹在定义路线的聚合物根成分中。

一个简单的例子是:

my-root-component:

<dom-module id="my-root-component">
    <template>
        <first-obrigatiory-page which-route={aValueReturnedFromFirstComponent}></first-obrigatiory-page>
        <template is="dom-if" if="[[_isTrueFunction(aValueReturnedFromFirstComponent)]]" restamp>
            <second-page which-sub-route={aValueReturnedFromSecondComponent}></second-page>
            <template is="dom-if" if="[[_isTrueFunction(aValueReturnedFromSecondComponentComponent)]]" restamp>
                <third-page ></third-page>
            </template>
        </template>
    </template>

        <script>
        Polymer({
            is: 'my-root-component',
            behaviors: [doesntMatterHere],
            properties: {

第一个dom-if可以正常工作,但似乎没有考虑第二个dom,并且我的第三页组件从不显示。

我检查了一下,_isTrueFunction(aValueReturnedFromSecondComponentComponent)的等效项返回true。

1 个答案:

答案 0 :(得分:1)

aValueReturnedFromFirstComponent确实返回任何内容,因为您应该将属性声明为which-route="{{aValueReturnedFromFirstComponent}}"而不是使用简单的{ }

whichRoute元素中的first-obrigatiory-page(请注意camelCase)属性是否具有notify: true属性,因此该变量实际上发回了更新后的值?


我通常在不更新dom-if的时候就对变量设置观察者,这样我就可以查看它们是否真的发生了变化,然后自己通过控制台用document.querySelector('my-root-component').set('aValueReturnedFromFirstComponent', true)设置变量,这样我就可以看到dom -如果确实更新。

一种解决方法是使用事件,但是您所做的应该可以。