{{variable}}不解釋

Question

不知何故我放在{{color}}和{{avatar}}中的變量不會被實際內容解釋/交換。見下面的例子：

<paper-toolbar id="navheader" class="tall"> 
    <div class="middle avatar {{color}}" style="background-image: url({{avatar}})"></div> 
    <div class="bottom uuid">{{uuid}}</div> 
</paper-toolbar> 

如果我不是把顏色可變，其中uuid是，它會打印正確color，這意味着它不是變量沒有被設置或不published。這似乎是干擾的，我做錯了什麼？值得一提的是，這是在「主要」文件中完成的。

全部下面的代碼：

<paper-drawer-panel id="drawerPanel" responsive-width="1280px"> 
<div class="nav" drawer> 
     <paper-toolbar id="navheader" class="tall"> 
      <div class="middle avatar {{color}}" style="background-image: url({{avatar}})"></div> 
      <div class="bottom uuid">{{uuid}}</div> 
     </paper-toolbar> 


    <section class="layout vertical" id="onlineList"> 
     <paper-item label="Online Now" class="subdue layout horizontal center"></paper-item> 
     <template is="dom-repeat" items="{{cats}}" as="cat"> 
      <paper-item label="{{cat}}"></paper-item> 
     </template> 
    </section> 
</div> 

<paper-header-panel main mode="waterfall"> 

<paper-toolbar> 
     <div class="flex">Kitteh Anonymous</div> 
     <iron-icon icon="account-circle"></iron-icon><span>{{occupancy}}</span> 
</paper-toolbar> 

<!-- Main Content --> 
<div class="layout vertical fit" id="chat"> 
     <div class="chat-list flex"> 
     <!--<x-chat-list avatar="url" username="name" text="hello" status="online" timestamp="1420145273945"></x-chat-list>--> 
      <template is="dom-repeat" items="{{messageList}}" as="message"> 
       <x-chat-list color="{{message.color}}" avatar="{{message.avatar}}" username="{{message.uuid}}" text="{{message.text}}" status="{{message.status}}" timestamp="{{message.timestamp}}"></x-chat-list> 
      </template> 
     </div> 
     <div class="shim"></div> 

     <div class="send-message layout horizontal"> 
      <paper-input class="flex" label="Type message..." id="input" value="{{input}}" on-keyup="checkKey"></paper-input> 
      <paper-fab icon="send" id="sendButton" on-tap="sendMyMessage"></paper-fab> 
     </div> 
</div> 
</paper-header-panel> 
</paper-drawer-panel> 

Answer 1

在1.0，您必須附上綁定在標籤中沒有空格，或者它是一個屬性的全部和唯一內容，即<hi so="{{then}}">{{there}}</hi>。

Answer 2

字符串連接在1.0中不像以前那樣受支持，儘管它在上次我聽到時正在處理。

https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#binding-to-text-content

你必須創造出爲您執行拼接的方法，並綁定到該方法。

例子：

<div class$="{{_colorClass(color)}}" style$="{{_backgroundImage(avatar)}}"></div> 

<script> 
    Polymer({ 
    _colorClass: function(color) { 
     return 'middle avatar '+color; 
    }, 
    _backgroundImage: function(avatar) { 
     return 'background-image: url('+avatar+');'; 
    } 
    }); 
</script>