簡單聚合物（0.5.4）數據綁定示例問題

我遇到了以下用於數據綁定的小型自含聚合物示例的麻煩。簡單聚合物（0.5.4）數據綁定示例問題

我的理解是，通過讓消費者和供應商都具有數據屬性，並且傳入了表達式{{stuff}}，這是指元素範圍內的變量「stuff」。

當供應商加載並準備就緒時，它應該填充stuff變量，導致消費者插入數據。

http://jsbin.com/yawipodayo/1/edit?html,css,js,output

<!doctype html> 
<html> 
<head> 
    <script src="../bower_components/webcomponentsjs/webcomponents.js"> 
    </script> 
    <link rel="import" href="../bower_components/polymer/polymer.html"> 
</head> 
<body> 
    <polymer-element name="consumer" attributes="data"> 
     <template bind="{{data}}">{{}}</template> 
    </polymer-element> 
    <polymer-element name="supplier" attributes="data"> 
     <template></template> 
     <script> 
     Polymer('supplier', { 
      ready: function(){ 
       this.data = "test" 
      } 
     }); 
     </script> 
    </polymer-element> 
    <polymer-element name = "root"> 
     <template> 
      <supplier data="{{stuff}}"></supplier> 
      <consumer data="{{stuff}}"></consumer> 
     </template> 
    </polymer-element> 
    <root> 
    </root> 
</body> 
</html>

來源

2015-02-07 Ryan The Leach

你有你的代碼中毛刺的量。我將下降圍繞問題的意見是固定的：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset=utf-8 /> 
    <title>Polymer</title> 
    <script src="http://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script> 
    <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html"> 
</head> 
<body> 
<!-- noscript tags are mandatory for elements not having script declared --> 
               <!-- ⇓⇓⇓⇓⇓⇓⇓⇓ --> 
<polymer-element name="my-consumer" attributes="data" noscript> 
<!-- when you need to output data, output it --> 
     <!-- ⇓⇓⇓⇓⇓⇓⇓⇓ --> 
    <template>{{data}}</template> 
</polymer-element> 
<!-- names MUST include hyphens (everywhere) --> 
       <!-- ⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓ -->   
<polymer-element name="my-supplier" attributes="data"> 
    <template></template> 
    <script> 
     // As of 0.5 you don’t need to specify name in script 
     // ⇓⇓⇓⇓ 
     Polymer({ 
     ready: function(){ 
      this.data = "test" 
     } 
    }); 
    </script> 
</polymer-element> 
<polymer-element name = "my-root" noscript> 
    <template> 
     <my-supplier data="{{stuff}}"></my-supplier> 
     <my-consumer data="{{stuff}}"></my-consumer> 
    </template> 
</polymer-element> 
<my-root> 
</my-root> 
</body> 
</html>

的更正按預期工作：http://jsbin.com/zewimobaro/1/edit

來源

2015-02-07 13:05:27 mudasobwa

哦，那些向下箭頭（現在的偷）！ :) – 2015-02-07 13:23:37

@JustinXL我有一個着名的箭頭™鍵盤:) – mudasobwa 2015-02-07 13:29:43

哦，我誤解了文檔，我認爲將{{data}}綁定到模板，這意味着{{}}現在引用了數據和{{data}}將引用data.data – 2015-02-07 13:37:56

簡單聚合物（0.5.4）數據綁定示例問題

回答

相關問題