No function calls happening in my polymer element - polymer-1.0

Question

I have created an element to list an array of companies (listado-empresas)
This is my code:
<link rel="import" href="ficha-empresa.html">
<dom-module id="listado-empresas">
<template>
<style>
:host {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
</style>
<p hidden="{{hayempresas}}">Ningún registro</p>
<p>{{nroEmpresas}} resultados</p>
<template is="dom-repeat" items="[[empresas]]" as="empresaAct">
<ficha-empresa empresa="[[empresaAct]]"></ficha-empresa>
</template>
</template>
<script>
Polymer({
is: 'listado-empresas'
, properties: {
empresas: Array
, hayempresas: {
type: Boolean
, computed: 'hayempresas()'
}
, nroEmpresas: {
type: Number,
computed: 'nroEmpresas()'
}
}
, hayempresas: function () {
console.log("funcion hayempresas...");
return nroEmpresas > 0;
}
, nroEmpresas: function(){
console.log("funcion nroEmpresas ...");
return this.empresas.length;
}
});
</script>
</dom-module>
The element list the companies successfully, but no function call is happening (because I don't see any log message)
Is there anything wrong in my code?
Thanks!

Answer 1

You have several problems:
Functions associated to computed fields shouldn't be named equal as the field. In your case both fields have the same name as the function that computes the function. Remember that this is javascript, you can't have a function and a field named the same in an object.
hidden: As it is an attribute you must use $= to enable correct data binding(When you use only = it will bind the property not the attribute)
Computed properties should observe one or more fields/paths. As stated on the documentation:
Computed properties are virtual properties computed on the basis of one or more paths. The computing function for a computed property follows the same rules as a complex observer, except that it returns a value, which is used as the value of the computed property.
Therefore, there shouldn't be a function with no parameters asociated to a computed field. For example, by your code, I guessed that nroEmpresas observe empresas and hayempresas do observe the field nroEmpresas.
Also as the field empresas is observed we must provide a default initial value in order to execute the first computation (you can assign null, [] ,undefined as long as you initialize the value).
I've updated your code with the previous adjustments
<link rel="import" href="ficha-empresa.html">
<dom-module id="listado-empresas">
<template>
<style>
:host {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
</style>
<p hidden$="{{hayempresas}}">Ningún registro</p>
<p>{{nroEmpresas}} resultados</p>
<template is="dom-repeat" items="[[empresas]]" as="empresaAct">
<ficha-empresa empresa="[[empresaAct]]"></ficha-empresa>
</template>
</template>
<script>
Polymer({
is: 'listado-empresas'
, properties: {
empresas: {
type: Array,
value: []
}
, hayempresas: {
type: Boolean
, computed: '_hayempresas(nroEmpresas)'
}
, nroEmpresas: {
type: Number,
computed: '_nroEmpresas(empresas)'
}
}
, _hayempresas: function (nroEmpresas) {
console.log("funcion hayempresas...");
return nroEmpresas > 0;
}
, _nroEmpresas: function(empresas){
console.log("funcion nroEmpresas ...");
return empresas.length;
}
});
</script>
</dom-module>
A plunker with part of the code running (Note that the plunker example doesn't have ficha-empresa, is just the portion of the code on the question) can be found here: http://plnkr.co/edit/wdn0cSIcNNKkzyLd6EhF?p=preview