聚合物1.0對屬性的奇怪行爲

Question

我剛剛學習聚合物（1.0），請耐心等待。

我使用express.js返回的JSON.stringified項目的部分陣列和換他們每個人，所以結果是如下（HTML）：

<fighter-profile fighter="{&quot;country&quot;:&quot;USA&quot;,&quot;countryFullName&quot;:&quot;United States&quot;,&quot;name&quot;:&quot;Frank Mir&quot;,&quot;nickname&quot;:&quot;&quot;,&quot;zuffa_record&quot;:{&quot;wins&quot;:&quot;15&quot;,&quot;losses&quot;:&quot;9&quot;,&quot;draws&quot;:0,&quot;no_contest&quot;:0}}"></fighter-profile>

似乎醜陋地獄，但那是json。

這裏是我的組件：

<dom-module id="fighter-profile"> 

    <template> 
    <div> 

     <paper-item> 
     <paper-item-body two-line> 
      <div>{{fighter.name}}</div> 
      <div secondary>{{nickname}}</div> 
      <div> 
      <paper-button raised on-click="handleClick">Show nickname</paper-button> 

      </div> 
     </paper-item-body> 
     </paper-item> 

    </div> 
    <br /> 
    <hr /> 
    <br /> 
    </template> 

    <script> 

    Polymer({ 

     is: 'fighter-profile', 

     properties: { 
     fighter: Object, 
     nickname: { 
      type: String, 
      value: 'testing' 
     } 
     }, 

     ready: function() { 
     this.nickname = (this.fighter.nickname !== '') ? this.fighter.nickname : '... the dude has no nickname!'; 
     }, 

     handleClick: function() { 
     alert(this.nickname); 
     } 

    }); 

    </script> 

</dom-module> 

現在，有趣的部分：名稱被正常顯示，而在那裏我有<div secondary>{{nickname}}</div>，結果在HTML簡直是{{nickname}};不過，如果我點擊按鈕，我會得到正確的值。

我在這裏錯過了什麼？

UPDATE：

我GOOGLE了一些東西，換成ready法created，當然，也沒有工作，因爲created我認爲是聚合物0.5版本的一部分。然後我切換回ready方法，現在一切正常。很奇怪。

什麼似乎是問題？一些緩存出錯了？一個錯誤？

更新2：

我又改變了一些東西，這是行不通的，但現在我已經想通了如何複製錯誤。所以，這段代碼不能正常工作：

<div secondary>The dude is also known as {{nickname}}</div> 結果是字面上的 「{{暱稱}}」

然而，這正常工作：

<div secondary>The dude is also known as <span>{{nickname}}</span></div> 結果是實際暱稱。

因此，將span標記中的屬性正確呈現。這是怎麼回事？

Answer 1

我想我可以在這裏幫助你一些事情。首先，您可以通過爲您的屬性使用單引號來使您的JSON更具可讀性。此外，還可以包括空格，如果你是硬編碼的JSON：

<fighter-profile 
    fighter='{ 
    "country":"USA", 
    "countryFullName":"United States", 
    "name":"Frank Mir", 
    "nickname":"", 
    "zuffa_record":{ 
     "wins":"15", 
     "losses":"9", 
     "draws":0, 
     "no_contest":0 
    } 
    }'></fighter-profile> 

接下來，我將假定JSON實際上是不硬編碼，並綁定到另一個數據源。我做了這個假設，因爲它看起來好像你的fighter屬性在ready中不可用，就像你期待的那樣。一個常見的問題，我在這樣的情況下看到的是類似以下內容：

<template is="dom-repeat" items="{{data}}" as="fighter"> 
    <fighter-profile fighter="{{fighter}}"></fighter-profile> 
</template> 

事情要記住在上述情況下是<fighter-profile>創建，準備好，並且父元素之前附加到DOM將fighter分配給其fighter屬性。

爲了解決這個問題，你可以使用時自動將數據被加載到一個屬性，它執行任務的觀察員：

<script> 
    Polymer({ 
    is: 'fighter-profile', 
    properties: { 
     fighter: Object, 
     nickname: { 
     type: String, 
     value: 'testing' 
     } 
    }, 

    observers: [ 
     // This tells Polymer to watch `fighter` and fire the 
     // _fighterUpdated method only after `fighter` receives 
     // a value **other than undefined.** 
     '_fighterUpdated(fighter)' 
    ], 

    _fighterUpdated: function(fighter) { 
     this.nickname = (this.fighter.nickname || '... the dude has no nickname!'); 
    } 
    }); 
</script> 

接下來，結合性質HTML。當您綁定到HTML內容（如<div>{{property}}</div>）時，聚合物（當前）在幕後執行的操作是將property直接綁定到div.innerText。聚合物也只檢查innerText的前兩個字符以查看它是否是{{或[[，並且如果它沒有找到它們，則不執行任何操作。

聚合物團隊正在努力使綁定更強大，但據我所知，他們還沒有公佈任何具體的計劃或時間表。目前，解決方案正如您發現的那樣，只是將內聯綁定包裝在<span> =）