javascript - 暴露 polymer 中的 API

Question

我正在尝试学习 polymer ，并且正在尝试制作一个基本的消息传递框架。所以我创建了一个名为 messages-framework 的小 polymer 元素，它将显示消息，并在 3 秒后删除该消息。如何公开向该元素添加消息的方法？这是我的 polymer 元件

<link rel="import" href="../bower_components/paper-input/paper-input-decorator.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">   

<polymer-element name="messages-framework">                                     
  <template>                                                                    
    <ul>                                                                        
      <template repeat="{{ m in messages }}">                                   
       <li>{{ m }}</li>                                                         
      </template>                                                               
    </ul>                                                                       
    <paper-input-decorator label="message" floatinglabel>                       
      <input is="core-input" value="{{ message }}" type="text">                 
    </paper-input-decorator>                                                    
    <paper-button raised on-tap="{{ addMessage }}">Add Message</paper-button>   
  </template>                                                                   
  <script>                                                                      
    Polymer({                                                                   
      messages: [],                                                             
      addMessage: function () {                                                 
        this.messages = this.messages.concat(this.message);                     
        setTimeout(this.removeMsg.bind(this, this.message), 3000);              
        this.message = "";                                                      
      },                                                                        
      removeMsg: function (msg) {                                               
        this.messages = this.messages.filter(function (m) {                     
          return msg !== m;                                                     
        });                                                                     
      }                                                                         
    });                                                                         
  </script>                                                                     
</polymer-element>

如有任何帮助，我们将不胜感激!

我认为我的问题表述得不好。如果有两个 polymer 元素，例如 messages-framework 和 newuser-form，如果 newuser-form 需要添加到 messages-framework，该 polymer 元素将如何使用 messages-framework API？

Answer 1

在 Polymer 中公开 API 就像在日常元素中所做的那样。

1. 获取对元素的引用。例如 var p = document.getElemnetTagName('p');
2. 使用它的方法。例如 p.innerHTML = "Hello World" 或 p.setAttribute(attribute,value)

示例:
您的自定义元素

<polymer-element name="messages-framework">                                     
  <template>                                                                    
    //all your core markup
  </template>                                                                   
  <script>                                                                      
    Polymer({                                                                   
      messages: [],                                                             
      addMessage: function () {                                                 
        this.messages = this.messages.concat(this.message);                     
        setTimeout(this.removeMsg.bind(this, this.message), 3000);              
        this.message = "";                                                      
      },                                                                        
      removeMsg: function (msg) {                                               
        this.messages = this.messages.filter(function (m) {                     
          return msg !== m;                                                     
        });                                                                     
      }                                                                         
    });                                                                         
  </script>                                                                     
</polymer-element>

使用它的API

<body>
  //Initialing the Element by loading it on to the page
  <messages-framework></messages-framework>

<script>
var messagesFramework = document.getElementsByTagName('messages-framework');

//this will call the addMessage() method of the element
messagesFramework.addMessage();
</script>
</body>