Question

我们目前正在开展一个项目，我们使用AngularJS和Polymer的组合。

我们有一些结构，但这段代码真正重要的是：

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

我们在$ scope上定义了一个名为dataContainer的变量，它在控制器中设置。问题是这个代码是在控制器准备该属性之前执行的，所以它是未定义的 - 它抛出：

[dom-bind :: _ annotatedComputationEffect]：未定义的计算方法dataContainer.getSomeData()

并且数据永远不会再次刷新，也不起作用。相反，如果它有效的属性（如果它的第一个状态未定义则无关紧要），它会被刷新。

因为它在我们的应用程序中非常重要，我们想问一下。如何达到要求的行为？

谢谢，祝你有愉快的一天！：）

Answer 1

我不熟悉聚合物，如果有可能延迟聚合物代码的执行，或者如果有消化循环，可以使用像AngularJS一样。

但我猜你可以通过简单的ng-if=与AngularJS方面的<ng-include>一起避免这种竞争条件 - 因为它不会将元素添加到DOM中，因此避免任何形式与聚合物相互作用直到它被包括在内。

所以例如：

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

在template.html中你的（未经修改的）代码：

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

如果这对你有所帮助，我会很高兴 - 但正如我所说，这只是一个猜测，我对聚合物以及它与DOM的相互作用知之甚少。

Answer 2

您看到的错误不是由未定义的dataContainer引起的，而是由您调用的函数引起的。 Polymer不支持数据绑定中的此类函数调用。来自docs：

数据绑定将自定义元素（主机元素）的属性或子属性绑定到其本地DOM（子元素或目标元素）中元素的属性或属性。

您正在调用属性上的函数，但该函数不起作用。如果您想调用某个函数，可以使用computed bindings。

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

但是，这假设您的菜单列表放在某个父Polymer元素中，并且我不确定这是否是您使用dom-bind时的情况。但是，如果你有一个父元素，那么你可以在那里添加计算函数。

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

});

getData将随时调用dataContainer或其子属性更改。

聚合物刷新属性的值，该值由方法计算

2 个答案: