模板化`<template>`中的自定义计算函数答案

【问题标题】：Custom computed functions in Templatized `<template>`模板化`<template>`中的自定义计算函数
【发布时间】：2015-11-17 20:03:36
【问题描述】：

使用 Polymer Templatizer 行为，假设我们已经完成了所有工作，并且我们不仅想要 stamp 属性，还想要计算函数，应该怎么做？

我可以通过指定来让它工作

_getRootDataHost: function(){
  return this;
}

然而事实证明，这样做意味着

<my-element prop="[[value]]"></my-element>

实际上是中断（因为现在在 <my-element> 中查找 value 而不是它的父级）。

要明确一点，上面允许的是

<my-element>
 <template>
  <span>{{someComputedProperty(item)}}</span>
 </template>
</my-element>

someComputedProperty 是在 <my-element> 上定义的，而不是它的容器。

【问题讨论】：

标签： javascript polymer polymer-1.0

【解决方案1】：

所以，实现这一点的一个极其丑陋的方法是直接在dataHost 上设置函数，所以我们得到的是一个在attached 中调用的函数，看起来像这样

_registerEvilFunctions: function(){
    this.dataHost._pdt_getArrayItemLabel = this._getArrayItemLabel;
    this.dataHost._pdt_getValidRegexForInput = this._getValidRegexForInput;
}

不能说我对它很满意，而且我确保在它前面加上很多前缀以防止冲突，但至少它可以工作。

【讨论】：