Polymer custom element property not accessible in nested template

Question

I have a custom element like below:

<polymer-element>
    <template if="{{primaryLoaded}}">
        <template repeat="{{pData in primaryData}}">
            <p>{{pData.propertyOne}}</p>
            <p>{{someClass.someOperation()}}</p>
            <template if="{{secodaryLoaded}}">
                <p>{{secondaryData.someProperty}}</p>
                <p>{{someClass.someOperation()}}</p>
            </template>
        </template>
    </template>
</polymer-element>

and a corresponding dart file:

class CustomElement extends PolymerElement with ObservableMixin
{
    @observable bool primaryLoaded = false;
    @observable bool secondaryLoaded = false;
    @observable var primaryData;
    @observable var secondaryData;
    @observable var someClass;

    void created()
    {
        primaryData = toObservable(new List<var>());
        secondaryData = toObservable(new List<var>());
    }

    void inserted()
    {
        someClass = new SomeClass();
        loadPrimaryData().then((pData) {
            primaryData = pData;
            primaryLoaded = true;
            loadSecondaryData().then((sData) {
                secondaryData = sData;
                secondaryLoaded = true;
            });
        });
    }
}

Everything works fine for the primaryData. Its properties get printed and the call to someOperation() on someClass prints its data correctly.

The problem is in the nested template. Nothing under the <template if="{{secondaryLoaded}}"> gets displayed. Even the call to someClass.someOperation() fails to display anything.

Is there a problem with scope here? It looks like the outer template can reference the properties defined in the dart file without problem but the nested template can't.

I read about setting variables as globals in the template by setting a custom binding delegate here. However, I can't set the bindingDelegate in my custom element as isTemplate returns false.

Is there any other way of setting a global variable in a custom template? Or am I going about this all wrong?

Nathanial Nathanial · Accepted Answer · 2013-10-21T17:37:43

It's a bug. You can star this issue to be notified of changes:

https://code.google.com/p/dart/issues/detail?id=12742

The only thing you can do for now is to turn nested templates into other polymer elements or figure out a way so the template isn't nested.

In your case, instead of using if="primaryLoaded" you could just set primaryData = null and the template shoud not display anything until primaryData is set, assuming primaryData is @observable.

Polymer custom element property not accessible in nested template

1 Answers