dom-if與Polymer 1.x有關

Question

我在模板轉發器中有幾個有條件標記的元素。 現在，當我更新數據時，if條件似乎沒有生效，這導致undefined傳遞到處理這些元素的數據的函數中。

使用restamp屬性似乎沒有幫助（ https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-if ）。 到目前為止，我只能通過在我的更改處理程序中清空items屬性（ this.items = []; ）來解決此問題，該處理程序啟動新請求。

這樣可行，但在顯示新數據之前，模板會在很短的時間內變空。 不一定是個問題，但我想知道我做錯了什么。

以下是代碼的相應部分：

<template>
...
<iron-ajax
  id="ironajax"
  url="https://www.url.com/api"
  params="{{ajaxParams}}"
  handle-as="json"
  on-response="handleResponse"
  on-error="handleError">
</iron-ajax>
...
<template is="dom-repeat" items="{{items}}" id="items">
...
<template is="dom-if" if="{{item.info.subtitle}}">: 
  <span>{{truncateSubtitle(item.info.subtitle)}}</span
</template>
...
Polymer({
  is: 'my-element',
  properties: {
    query: {
      type: String,
      value: ''
    }
    ...
    items: {
      type: Array,
      value: []
    }
  }
  ...
  handleChange: function() {
    if (this.value !== '') {
      this.items = [];
      this.query = this.value;
      this.$.ironajax.generateRequest();
    }
  }
...

Answer 1

給定"{{item.info.subtitle}}" ，如果item.info為null或undefined或者如果item.info.subtitle undefined ，則綁定將不會刷新並且可能具有過時值（在重復的上下文中）節點被重用）。

Polymer不會對undefined值執行計算，因為它在很多情況下都是性能增強，但在這種情況下它可能很棘手。

您應該使用函數來解決正確的狀態。 就像是

if="{{hasSubtitle(item)}}"

和

hasSubtitle function(item) {
  return item.info && item.info.subtitle;
}

Answer 2

“dom-if”的“if”屬性需要布爾值。

如果“item.info.subtitle”不為空或為null，請嘗試創建將設置為true或false的聚合物屬性。

然后使用dom-if創建的屬性：

<template is="dom-if" if="{{hasSubtitle}}" >

參考： http ： //polymer.github.io/polymer/ - > dom-if（下拉列表）

---

附加信息：6月10日添加

嘗試使用屬性而不是方法。

像這樣聲明你的財產：

Polymer({
    is: "my-element",
    properties: {
        hasSubtitle: {
            type: Boolean,
            value: 'false',  //false or true, the more common case.
        }
    },
    ...
});