Polymer refresh the property's value which is calculated by a method

Question

We are currently working on a project, in which we use a combination of AngularJS and Polymer.

We have some structure, but what's really important is this piece of code:

<template is="dom-bind" angupoly="{dataContainer:'dataContainer'}">
    <menu-list for="places" data="{{dataContainer.getSomeData()}}">
</template>

We have a variable defined on $scope named dataContainer, which is being set in a controller. The problem is that this code is executed before the controller prepares that property, so it's undefined - it throws:

[dom-bind::_annotatedComputationEffect]: compute method dataContainer.getSomeData() not defined

And the data are never refreshed again and it does not work. On the contrary, with a property it works (it does not matter if it's first state is undefined), it is refreshed.

Because it's a really important point in our application, we wanna ask. How to reach required behaviour?

Thanks, have a nice day! :)

Answer 1

I am not familiar with polymer and if there are possibilties to delay the execution of the polymer code or if there a digest cycles one could work with like in AngularJS.

But I would guess you could avoid this kind of race condition with a simple ng-if= in conjunction with <ng-include> on AngularJS side - as it does not add the elements to the DOM, thus avoid any kind of interaction with polymer until it is included.

So e.g.:

<figure ng-if="dataContainer.getSomeData">
    <ng-include src="'template.html'">
</figure>

And within template.html your (unmodified) code:

<template is="dom-bind" angupoly="{dataContainer:'dataContainer'}">
    <menu-list for="places" data="{{dataContainer.getSomeData()}}">
</template>

I would be happy if this helps you - but as I said it is just a guess and I don't know much about polymer and how it interacts with the DOM.

Answer 2

The error that you are seeing is not caused by dataContainer being undefined, but the function that you call on it. Polymer does not support this type of function calls in data-binding. From the docs:

Data binding binds a property or sub-property of a custom element (the host element) to a property or attribute of an element in its local DOM (the child or target element).

You are calling a function on a property, which does not work. If you want to call a function, you could to this with computed bindings.

<menu-list for="places" data="{{getData(dataContainer.*)}}">

However, this assumes that your menu-list is placed in some parent Polymer element and I'm not sure if this is the case here as you use a dom-bind. However, if you do have a parent element you could then add the computed function there.

Polymer({
    is: 'parent-element',
    properties: {dataContainer: ....},
    getData: function() {
        return dataContainer.getSomeData();
    }

});

getData will be called anytime dataContainer or its sub-properties change.