我的聚合物元素中没有发生函数调用

Question

我创建了一个元素来列出一系列公司 (listado-empresas)

这是我的代码：

<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>

元素成功列出了公司，但没有函数调用发生（因为我没有看到任何日志消息）

我的代码有什么问题吗？

谢谢！

Answer 1

你有几个问题：

与计算字段关联的函数不应命名为等于字段。在您的情况下，两个字段与计算函数的函数同名。请记住，这是 javascript，对象中不能有同名的函数和字段。
隐藏：因为它是一个属性，您必须使用 $= 来启用正确的数据绑定（当您仅使用 = 时，它将绑定属性不是属性)
计算属性应遵守一项或多项 fields/paths。如文档所述：

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.

因此，不应该有没有参数的函数与计算域相关联。例如，根据您的代码，我猜想 nroEmpresas 会观察 empresas，而 hayempresas 会观察字段 nroEmpresas。

另外，由于字段 empresas 被观察到，我们必须提供一个默认的初始值，以便执行第一次计算（您可以分配 null，[]，undefined 只要您初始化该值）。

我已经用之前的调整更新了你的代码

<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>

带有部分代码运行的 plunker（请注意，plunker 示例没有 ficha-empresa，只是问题的部分代码）可以在这里找到：http://plnkr.co/edit/wdn0cSIcNNKkzyLd6EhF?p=preview

我的聚合物元素中没有发生函数调用

No function calls happening in my polymer element

polymer-1.0